目录
1.标题标记
<h1></h1>~<h6></h6>
独占一行,加粗显示,级别越高字体越小
2. 超链接标记
<a></a>
<a href="#" target="_blank">百度</a>
<a href="#" target="_self">百度</a>
多个占一行,自带样式:下划线、字体颜色为蓝色
href 值为跳转的链接
target="_blank":在新标签页打开标签链接
target="_self":在当前标签页打开标签链接
1. a 标签有默认的颜色:蓝色
2. 它不会继承父辈元素的字体颜色,可以理解为继承颜色的优先级小于默认颜色,但可以单独设置同样要注意权重问题
3. 在写导航时常用a标签,如果我们已经将a标签字体颜色设置为某色,那么再写.nav li:hover{color:"#0f0"}此时a可以继承#0f0,如果a的颜色未设置则仍无法继承
3. 路径
绝对路径:
浙江省杭州市 xx小区 x单元 101
D://mygoods/code/index.html
相对路径:
相对于某一个文件(夹)的位置
./ 同一级目录
../ 跳转到上一级目录
4. 图片
<img src="./img/img01.jpg" width="100px" title="我是图片" alt="图片无法加载时显示" border="10px" />
img标签属性:
src 路径
width 图片宽度
height 图片高度
title 图片描述信息 鼠标停留在图片上会显示
alt 图片路径错误或者无法加载时的描述信息
border 边框
5. 表格
<table border="1px" width="500px" cellspacing="0" cellpadding="10px" align="center">
<tr height="60px" align="center">
<td width="100px">11</td>
<td valign="bottom">11</td>
<td>11</td>
</tr>
<tr>
<td>11</td>
<td>11</td>
<td>11</td>
</tr>
</table>
table标签属性
border------边框
width--------表格宽度
cellspacing------单元格之间的距离(外间距)
cellpadding------内容和单元格之间的距离(内间距)
align="left/right/center"-----------表格在页面的居中方式
table通用属性
【<table>,<tr>,<td>
都识别的属性】
- 对齐方式align="left/center/right"
- 宽度width,设置表格的宽度,取值可以为固定像素值(像素px省略不写),也可以是百分比
- 高度height,设置表格高度,取值可以为固定像素值(像素px省略不写),也可以是百分比
tr属性
- valign---单元格中内容的垂直排列方式,下图中第一行设置了valign="bottom"对齐方式
td属性
- 垂直对齐valign---单元格中内容的垂直排列方式
- 单元格合并
同一行的单元格合并,就是列合并colspan=""
同一列的单元格合并,就是行合并rowspan=""
几个单元格合并成一个,colspan和rowspan的值就是几
跨列合并(colspan写左边单元格)
<!-- 第一行 -->
<tr>
<td colspan="2">单元格1</td>
<!-- <td>单元格2</td> -->
<td>单元格</td>
<td>单元格4</td>
</tr>
跨行合并(rowspan写上面单元格)
<!-- 第一行 -->
<tr>
<td colspan="2">单元格1</td>
<!-- <td>单元格2</td> -->
<td>单元格</td>
<td rowspan="2">单元格4</td>
</tr>
<!-- 第二行 -->
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<!-- <td>单元格8</td> -->
</tr>
【注意】我们合并的时候,需要删除相应的td列,如果删除不正确,会出现不必要的错误。
table其他属性
caption:
caption 属性返回了表格的 caption 元素。
caption 元素定义了表格的标题。
注意: <caption> 元素定义了一个表格标题。<caption> 标签必须紧跟在 <table> 标签之后,每个表格仅能规定一个 caption。通常,caption 会位于表格之上居中的位置。
表格结构标签(添加这三个标签时,要注意不能影响网页布局):
<thead></thead> 表头部(放表格的标题之类)
<tbody></tbody> 表主体(放表格主体数据)
<tfoot></tfoot> 表脚注(放表格脚注)
在写代码时:不论上面<thead>,<tfoot>,<tbody>顺序如何,在页面显示时,总是按照:<thead> <tbody> <tfoot>的顺序呈现出来的。
6. 列表标记
- 无序列表
- 有序列表
- 自定义列表
无序列表
<ul>
标签表示HTML页面中项目的无序列表,一般会以项目符号呈现列表项,而列表项使用<li>
标签定义。
无序列表基本语法格式
ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul>
有序列表
<ol>
标签用于定义有序列表,列表排序以数字来显示,并使用<li>
标签来定义列表项。有序列表基本语法格式:
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ol>
-
<ol></ol>
中只能嵌套<li></li>
,直接在<ol></ol>
标签中输入其他标签或文字的做法是不被允许的。 -
<li>
与</li>
之间相当于一个容器,可以容纳所有元素。 -
有序列表会带有自己样式属性,但在实际使用时,我们会使用CSS来设置。
自定义列表
标签用于定义描述列表(或定义列表), 该标签会与(定义项目/名字)和
(描述每一个项目/名字)一起使用。
注:
dl 是definition lists的英文缩写 (自定义列表)
dt 是definition term的缩写 (自定义列表组)
dd 是 definition description 的缩写(自定义列表描述)
基本语法:
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl>
-
<dl></dl>
里面只能包含<dt>
和<dd>
。 -
<dt>
和<dd>
个数没有限制,经常是一个<dt>
对应多个<dd>
。
列表总结
标签名 | 定义 | 说明 |
<ul></ul> | 无序列表 | 里面只能包含li,没有顺序,使用较多。li里面可以包含任何标签 |
<ol></ol> | 有序列表 | 里面只能包含li,有顺序,使用相对较少。li里面可以包含任何标签 |
<dl></dl> | 自定义列表 | 里面只能包含dt和dd。dt和dd里面可以包含任何标签 |
7. 其他标记
<br> 换行
<hr> 水平线
ˆ ^
<b>加粗</b>
<u>下划线</u>
<i>倾斜</i>
8. 表单标记
表单 允许我们发送和接收来自web网页的数据
form表单 所有表单元素(输入框和按钮)需要位于表单标记内
属性: name 标识表单的唯一名称
action 提交时处理表单数据的地址url
method 传送数据的请求方式 get/post
组成
表单域、表单控件(也称表单元素)和提示信息
表单域
表单域是一个包含表单元素的区域
在HTML标签中,<form>
标签用于定义表单域,以实现用户信息的收集和传递
<form>
会把它范围内的表单元素信息提交给服务器
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>
属性 | 属性值 | 作用 |
action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址 |
method | get/post | 用于设置表单数据的提交方式,其取值为get或post |
name | 名称 | 用于指定表单的名称,以区分同一个页面中的多个表单域 |
【*****】get 和 post 区别:
get:浏览器地址栏可以看到,不安全,传输数据量小
post:数据通过http协议传输,安全,传输数据量大
表单控件(表单元素)
在表单元素中可以定义各种表单元素,这些表单元素就是允许用户在表单中输入或者选择的内容控件。
- input输入表单元素
- select下拉表单元素
- textarea文本域元素
input输入表单元素
<input>
标签用于收集用户信息
在<input>
标签中,包含一个type属性,根据不同的type属性值,输入字段拥有很多种形式(可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等)
<input type="属性值"/>
<input/>
标签为单标签- ·type属性设置不同的属性值用来指定不同的控件类型
除type属性外,<input>
标签还有其他很多属性,如下
属性 | 属性值 | 描述 |
name | 由用户自定义 | 定义input元素的名称 |
value | 由用户自定义 | 规定input元素的值 |
checked | checked | 规定此input元素首次加载时应当被选中 |
maxlength | 正整数 | 规定输入字段中的字符的最大长度 |
name和value是每个表单元素都有的属性值,主要给后台人员使用
name表单元素的名字,要求单选按钮和复选框要有相同的name值
checked属性主要针对于单选按钮和复选框,主要作用——打开页面就要可以默认选中某个表单元素
maxlength是用户可以在表单元素输入的最大字符数,一般较少使用
问题:
- 有些表单元素想刚打开页面就默认显示几个文字怎么做?
用户名:<input type="text" value="请输入用户名"/>
- 页面中的表单元素很多,如何区别不同的表单元素?
答:name属性:当前input表单的名字,后台可以通过这个name属性找到这个表单,页面中的表单很多,name的主要作用就是用于区别不同的表单。
用户名:<input type="text" value="请输入用户名" name="username"/>
name属性后面的值,是自定义的
radio(或者checkbox)如果是一组,我们必须给他们命名相同的名字
<input type="radio" name="sex"/>男
<input type="radio" name="sex"/>女
【注意】
<input type="text">在点击输入框时会有一个默认的加粗黑色边框,用outline-style:none即可去除
label标签
label标签为 input 元素定义标注(标签)
<label>
标签用于绑定一个表单元素,当点击<label>
标签内的文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验。
<label for="sex">男</label>
<input type="radio" name="sex" id="sex"/>
核心:
<label>
标签的for属性应当与相关元素的id属性相同
select表单元素
使用场景:在页面中,如果有多个选项让用户选择,并且想要节约页面空间时,我们可以使用<select>
标签控件定义下拉列表
语法:
```
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
```
-
<select>
中至少包含一对<option>
-
在
<option>
中定义selected="selected"时,当前项即为默认选中项
textarea表单元素
使用场景:当用户输入内容较多时,我们就不能使用文本框表单了,此时我们可使用标签
在表单元素中,标签是用于定义多行文本输入的控件。
使用多行文本输入控件时,可以输入更多的文字,该控件常见于留言板,评论。
语法:
<textarea rows=""3 cols="20">
文本内容
<textarea>
-
通过标签可以轻松创建多行文本输入框
-
cols="每行中的字符数",rows="显示的行数",我们在实际开发中不会使用,都是用CSS来改变大小。
表单元素总结
- 表单元素我们学习了三大组:
input输入表单元素
select下拉表单元素
textarea文本域表单元素
-
这三组表单元素都应该包含在form表单域里面,并且有name属性。
<form>
<input type="text" name="username">
<select name="jiguan">
<option>北京</option>
</select>
<textarea name="message"></textarea>
</form>
- 有三个名字非常相似的标签:
(1)表单域 form 使用场景:提交区域内表单元素给后台服务器
(2)文件域 file 使用场景:上传文件
(3)文本域 textarea 使用场景:可以输入多行文字,比如留言板、网站介绍等