本文介绍了HTML和CSS的基础知识，包括HTML的各种标签如表格、超链接、列表和表单的使用方法，以及CSS的导入方式和选择器的应用。
W3C 标准：网页主要由三部分组成
结构：HTML
表现：CSS
行为：JavaScript
HTML
HTML：超文本标记语言
- 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容
- 标记语言：由标签构成的语言
HTML 是一门语言，所有的网页都是用HTML 这门语言编写出来的， 运行在浏览器上，HTML 标签由浏览器来解析。
标签运用
表格标签
table：定义表格
- border：规定表格边框的宽度
- width ：规定表格的宽度
- cellspacing：规定单元格之间的空白
tr：定义行
- align：定义表格行的内容对齐方式
- th：定义表头标题
- td：定义单元格
- rowspan:规定单元格可横跨的行数
- colspan:规定单元格可横跨的列数
示例一：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格标签运用</title>
</head>
<body>
<font face="宋体">
<center>
<table border="1" cellspacing="0">
<tr> <th colspan="7" ><i>河马小学</i></th> </tr>
<tr align="center">
<th colspan="2"></th>
<th width="8%">星期一</th>
<th width="8%">星期二</th>
<th width="8%">星期三</th>
<th width="8%">星期四</th>
<th width="8%">星期五</th>
</tr>
<tr align="center">
<td rowspan="4" width="10%">上午</td>
<td width="8%">早自习</td>
<td>英语</td>
<td>语文</td>
<td >数学</td>
<td>生物</td>
<td>生物</td>
</tr>
<tr align="center">
<td>第一节</td>
<td>英语</td>
<td>语文</td>
<td>数学</td>
<td>生物</td>
<td>生物</td>
</tr>
<tr align="center">
<td>第二节</td>
<td>英语</td>
<td>语文</td>
<td>数学</td>
<td>生物</td>
<td>生物</td>
</tr>
<tr align="center">
<td>第三节</td>
<td>英语</td>
<td>语文</td>
<td>数学</td>
<td>生物</td>
<td>化学</td>
</tr>
<tr align="center">
<th colspan="7">午休</th>
</tr>
<tr align="center">
<td rowspan="3">下午</td>
<td>第四节</td>
<td>政治</td>
<td>地理</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
</tr>
<tr align="center">
<td>第五节</td>
<td>政治</td>
<td>地理</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
</tr>
<tr align="center">
<td>第六节</td>
<td>政治</td>
<td>地理</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
</tr>
</table>
</center>
</font>
</body>
</html>
示例二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body >
<center>
<table border="1" cellspacing="0" width="500">
<tr>
<th>序号</th>
<th>logo</th>
<th>品牌名称</th>
<th>企业名称</th>
</tr>
<tr align="center">
<td>010</td>
<td><img src="../img/三只松鼠.png" width="60" height="50"></td>
<td>三只松鼠</td>
<td>三只松鼠</td>
</tr>
<tr align="center">
<td>010</td>
<td><img src="../img/优衣库.png"width="60" height="50"></td>
<td>优衣库</td>
<td>优衣库</td>
</tr>
<tr align="center">
<td>010</td>
<td><img src="../img/小米.png"width="60" height="50"></td>
<td>小米</td>
<td>小米科技有限公司</td>
</tr>
</table>
</center>
</body>
</html>
超链接
< a >定义超链接，用于链接到另一个资源
href：指定访问资源的URL
target：指定打开资源的方式
- _self：默认值，在当前页面打开
- _blank：在空白页面打开
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>河马去搬砖</title>
</head>
<body background="d.jpg">
<center>
<a href="https://www.youkuaiyun.com/" target="_self">
<font size="7" color="lightpink" face="bradley hand itc"> 河马去搬砖</font>
</a>
</center>
</body>
</html>
自己打包后在桌面显示，更方便进入csdn学习啦
列表标签
- ol 有序列表
- ul 无序列表
- li 定义列表项
- type：设置项目符号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ol type="">
<li>咖啡</li>
<li>牛奶</li>
<li>奶茶</li>
</ol>
<br>
<ul>
<li>咖啡</li>
<li>牛奶</li>
<li>奶茶</li>
</ul>
</body>
</html>
表单标签
表单：在网页中主要负责数据采集功能，使用< form >标签定义表单
form：定义表单
-
action：规定当提交表单时向何处发送表单数据，URL
-
method ：规定用于发送表单数据的方式
-
- get：浏览器会将数据直接附在表单的 action URL 之后， 大小有限制4KB
-
- -post：浏览器会将数据放到http请求消息体中。大小无限制
表单项(元素)：不同类型的 input 元素、下拉列表、文本域等
input 表单项 通过type属性 控制输入类型
- checkbox 复选框
- radio 定义单选按钮
- password 定义密码
- reset 重置
- submit 提交
- button 按钮
- hidden 隐藏
- select 下拉列表 option定义列表项
- textarea 文本域
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单项</title>
</head>
<body>
<!--
action 指明表单数据提交的url
表单数据要想被提交 必须指定其属性
method 表单提交的方式
get 默认值
请求的参数会拼接在url后面
url长度有限制 4KB 请求参数有限
post
请求的参数会在http协议的请求体中
请求参数无限制
-->
<!-- #代表 将数据提交到当前页面-->
<form action="#" method="post">
<!-- name表示提交内容的名字
value用来设置默认值-->
<label for="username">用户名:</label>
<input type="text" name="username" id="username"/> <br/>
<label for="phone">手机号:</label>
<input type="text" name="phone" id="phone"/><br/>
<label for="password"> 密 码:</label>
<input type="password" name="password" id="password"/><br/>
<label for="yanZhen">验证码:</label>
<input type="text" name="yanZhen" id="yanZhen"/><br/>
<label for="login">注册:</label>
<input type="submit" value="注册" id="login"/><br/>
<!--单选按钮 不加属性 数据都一样的 必须加属性 把value的值提交到服务端-->
性别：
<!--name 属性的值必须相同，才会有单选的效果-->
<input type="radio" name="gender" value="1" id="male"/>
<label for="male">男</label>
<input type="radio" name="gender" value="2" id="female"/>
<label for="female">女</label>
<br/>
爱好：
<input type="checkbox" name="hobby" value="1" id="11"/> <label for="11">旅游</label>
<input type="checkbox" name="hobby" value="2" id="22"/> <label for="22">电影</label>
<input type="checkbox" name="hobby" value="3" id="33"/> <label for="33">游戏</label>
<br/>
头像:
<input type="file" value="选择文件" />
<br/>
<input type="reset" value="重置"/>
<input type="button" value="一个普通的按钮"/>
<br/>
当前城市：
<input type=""/>
<select name="city">
<option>北京</option>
<option>上海</option>
<option>广州</option>
</select>
<br>
<br>
个人描述：
<textarea cols="20" rows="5"></textarea>
</form>
</body>
</html>
布局标签
< div > ：定义HTML文档中的一个区域，经常与CSS一起使用，布局网页
< span >：组合行内元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>布局</title>
</head>
<body background="d.jpg">
<div>王大傻</div>
<div>李小聪</div>
<span>王大傻</span>
<span>李小聪</span>
</body>
</html>
可以看出 div标签没有在一行内，span标签在同一行内！
CSS
css（层叠样式表）是一门语言，控制网页表现
导入方式
CSS 导入 HTML有三种方式：
内联样式 ：
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。
<div style="color: red">Hello CSS~</div>
内部样式 ：
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 < style > 标签在文档头部定义内部样式表，就像这样:
<style type="text/css">
div{
color: red;
}
</style>
外部样式 ：
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 < link > 标签链接到样式表。< link > 标签在< head >头部：
<!-- stylesheet:定义一个外部加载的样式表-->
<link rel="stylesheet" href="demo.css">
demo.css：
浏览器会从文件 demo.css 中读到样式声明，并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：
div{
color: red;
}
代码练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导入方式</title>
<!-- css代码和html代码结合 -->
<!-- 内部样式： -->
<style>
p{
color: red;
}
</style>
<!-- 外部样式 stylesheet:定义一个外部加载的样式表 -->
<link href="../css/css导入.css" rel="stylesheet">
</head>
<body>
<!-- 方式一 内联样式 -->
<div style="color: red;">hello</div>
<!-- 内部样式： -->
<p>hello css</p>
<!-- 外部样式 -->
<span>hello css css</span>
</body>
</html>
外部导入的CSS文件：
span{
color: red;
}
选择器
选择器是选取需设置样式的元素（标签）
每条声明由一个属性和一个值组成。
分类：
- 元素选择器
-
- 元素名称{color: red;}
- id选择器
-
- #id属性值{color: red;}
- 类选择器
-
- .class属性值{color: red;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 选择器是选择需要选取设置样式的元素 -->
<style>
/* 元素选择器*/
div{
color: #006400;
font-size:35px;
}
/* id选择器*/
#name{
color: black;
}
/* 类选择器*/
.cls{
color: aquamarine;
}
</style>
</head>
<body>
<div>css1</div>
<div id="name">css2</div>
<span class="cls">span</span>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
