常用标签
- 标签的属性
- 属性:表示标签的某个特征,一般用来协助标签实现特定的功能。比如的href属性实现跳转页面
- 对于任何一个HTML标签,都可以嵌套使用
- 嵌套:标签里有标签(套娃)
标题和段落
-
标题标签:h1~h6
<h1>一级标题</h1>
- 页面中使用h1~h6表示页面中的标题
- 显示效果:h1最大、h6最小,我们关心的是语义效果,不是显示效果(标题标签可以通过属性修改样式,但是语义不会因此二改变)
- 语义效果:表示的是语法的效果,即便以后字体大小、颜色改变其语义也不变
- 网页中的h1是比较重要的标签,有助于搜索引擎的搜索,影响到搜索引擎的排名。
- 一个页面一般只有一个h1标签,表示网页中的主要描述内容,h1~h6重要程度依次降低
-
段落标签:p
-
p标签表示页面中的段落
-
p标签独占一行,段落之间又间距
-
<p></p>
-
-
换行标签:br
-
段落之间的间距较小
-
br是单闭合标签
-
<br>
-
-
水平线:hr
-
表示水平线
-
<hr />
-
特殊符号(在HTML中一些特殊的字符不能直接使用,需要使用一些特殊的符号来表示)
在页面中显示<abc>
<abc>
特殊符号的语法:
& + 实体 + ;
> : >
< : <
空格 :  
版权符号 : ©
引号 : "
img:图片
- 概念:一个img标签对应一张图片
- 语法
<img src='图片的路径' title='鼠标放置时的提示信息' />
- 特点:
- 自结束标签
- 行内元素
- 如果需要保持图片的比例,那么宽高只需设置一个
- 属性
- src:表示要显示的图片地址
- width:设置图片的宽度
- height:设置图片的高度
- alt:如果图片不能显示时,则对图片的文本描述,搜索引擎可以根据alt识别图片。
- title:鼠标放置时的提示信息 (title:标题)
- align:图像与(上下左右中对齐)
- align:对齐
- 例子
<img src='' width='100px' height='100px'>
<img src='' align='left'>向左对齐
<img src='' align='right'>向右对齐
<img src='' align='middle'>向中对齐
<img src='' align='top'>向上对齐
<img src='' align='bottom'>向下对齐
路径
-
路径
-
概念:电脑里某个文件的位置描写。路径分为绝对路径和相对路径
-
绝对路径:指的是某个文件的唯一的位置描述。即无论用什么方式访问这个路径,指向的都是同一路径
-
例子
-
<img src='C:/Users/lenovo/图片/001' alt='我猜的'>
-
-
相对路径:
-
相对于当前的HTML文件作为起点
-
…/:上一级目录
-
./:当前目录
-
<img src='../../03.jpg' alt='还是我猜的' title='猜对了'>
-
-
meta
- 对基本信息的描述
<!-- 关键字 -->
<meta name='keywords' content='html5'>
<!-- 摄制当前网页的编码格式 -->
<meta charset='utf-8'>
<!-- 网站内容描述 -->
<meta name='description' content='html css'>
标签规范
-
浏览器会尽最大努力修正页面,但还是需要遵守一些规则
-
规范
-
HTML不分大小写,但一般小写
-
注释不可以嵌套
-
标签结构必须完整
-
标签可以嵌套,但不能交叉
-
<div><p></div></p> ×
-
-
标签加属性的话,则属性必须有值
-
内联框架
-
如何在当前页面中引入其他页面的信息?
答:复制、粘贴或内联框架
<iframe name='my' src='03.html' frameborder='0' width='' height=''>
- src:设置一个外部页面的路径,一般使用相对路径
- frameborder:设置边框。 0表示无边框,1表示有边框
- name: 表示给内联框架指定一个名称
- 注意内联框架不会被搜索引擎检索和识别
链接标签
a:超链接
- 概念:用于显示超文本的超链接
- 语法
<a href="要跳转的网页地址"></a>
<a href="http://baidu.com">如果超链接为网址,以http://开头</a>
- 属性
- href:用来表示该超链接要跳转的网页地址
- target:规定在何处打开标签
- _blank:在新的窗口打开
- _self:当前窗口打开(默认值)
a标签的状态:访问前、中、后
-
特点
-
默认情况下是不会换行的,也就是说可以和其他的同行显示
-
例子:
-
<p>hello<a href='http://www.baidu.com'>百度</a></p>
-
在本页面中打开其他的页面
<a href='' target='my'>名字</a>
<iframe [src=''] frameboder='边框' width='宽' height='高' name='my' ></iframe>
锚点链接
点击跳转到页面指定的位置
- 超链接的地址设置为# + id,就会跳转到指定的位置,被称为锚链接
- id值唯一
<a href='#id值'>索引</a>
<h1><a id='值'><a> 目标</h1>
发送邮件
<a href='mailto:邮件地址'></a>
文本标签
strong:加粗 b:加粗
em:斜体 i:斜体
<!--strong、em有强调的意义-->
small:输出的文本比父元素小一号
q:表示短语的引用。一般在名言、古诗等地方引用
blockquote:块引用
<!--blockquote常用于语句的引用,文本引用时有缩进-->
sup:上标 比如'平方'
sub:下标 比如水化学式的下标
del:删除线 比如一些废弃的元素
ist:下划线 和超链接的下划线长得一样
pre:预格式标签,常用配合code在页面中显示代码
列表标签
无序列表
<ul>
<li></li>
</ul>
<!-- 不论是ul、ol还是li,都是块元素 -->
<!--
可以给ul加type属性
属性值为:
disc:实心圆点(默认)
sircle:空心圆点
squary:空心圆点
-->
有序列表
<ol>
<li></li>
</ol>
<!--
可以给ol加type属性
属性值为:
1:数字(默认)
A/a:字母顺序
i/I:罗马数字
-->
定义列表
<dl>
<dt>列表标题(一个)</dt>
<dd>列表主体(n个)</dd>
······
<dt>列表标题(一个)</dt>
<dd>列表主体(n个)</dd>
</dl>
表格(table)
- 表格不是用来布局页面的,而是用来展示数据的。
- 基本语法:
<table>
<tr>
<th>表头单元格的文字</th>
······
</tr>
······
<tr>
<td>单元格内的文字</td>
</tr>
·······
</table>
<!--
table 表格标签
tr 行标签
th 表头单元格(内部文字会加粗居中显示)
td 单元格,(th\td必须在tr中)
-->
属性:(不常用,后期用CSS设置)
<!--
table的属性
对齐方式(align:对齐):
align='left/center/right'
边框:
border=''
单元格里文字与边框之间的距离(默认1PX)(cell:细胞 padding:填充)
cellpadding=''
单元格和单元格之间的距离(默认2PX)( :间距)
cellspacing=''
表格的宽度/高度
width=''
height=''
-->
表格结构标签:
表格可以划分为三个区域:只进行语法意义上的划分,默认没有显示效果
<table>
<thead>
<tr>
<th>表头单元格的文字</th>
······
</tr>
</thead>
<tbody>
······
<tr>
<td>单元格内的文字</td>
</tr>
·······
</tbody>
</table>
<!--
表格可以划分为三个区域:
thead标签:表格的头部区域
tbody标签:表格的主体区域
tfoot标签:表格的底部区域
他们都是table的子标签
-->
合并单元格(都是td的属性)
跨行合并:rowspan=‘合并单元格的个数’
跨列合并:colspan=‘合并单元格的个数’
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SWjgV8dN-1626701099698)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\1626355838342.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vX5vmMsX-1626701099699)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\1626355891478.png)]
表单标签
-
为什么需要表单?
收集用户信息
-
表单的组成?
表单域、表单控件和提示信息
表单域
-
表单域就是包含表单元素的区域
-
<!-- <form>标签用于定义表单域。(form会把范围内的表单元素信息提交给服务器) action(动作):提交服务器的地址 method(提交方式): GET:默认提交方式,将提交的信息放置在url之后,传递信息大小有限制。 POST:信息隐藏的方式提交给服务器,相对安全。 --> <form action='url地址' method='提交方式(get/post)' name='表单域名称'> </form>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gZIrnYy0-1626701099701)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\1626406842453.png)]
表单元素(表单项)
- input (输入):
<form action='url地址' method='GET'>
<p>
<label for='uname'>用户名: </label>
<input id='uname' type='text' name='susername'>
</p>
<p>
密码:
<input type='password'>
</p>
<p>
<input type='submit' value='确认'>
</p>
<p>
性别:男:<input style='radio' name='1' value='男' checked>女:<input style='radio' name='1' value='女'>
</p>
<input type="date" name="bday">
<input type="datetime-local" name="bdaytime">
</form>
<!--
type的值不同,表单项的类型就不行
type(类型):
text 文本框
password 密码框
submit 提交按钮
reset 重置
radio 单选框
checkbox 复选框
button 普通按钮(点击后的功能由js代码实现)
image 图片按钮(配合src使用,点击后的功能由js代码实现)
hidden 隐藏域(浏览器界面看不到,但服务器需要)
date 输入日期的控件(年、月、日,不包括时间)。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。
datetime-local 输入日期和时间的控件,不包括时区。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。
email 编辑邮箱地址的区域。类似 text 输入,但在支持的浏览器和带有动态键盘的设备上会有确认参数和相应的键盘。
name:服务器通过name的值获取提交的信息
value:
在提交按钮中,value设置按钮显示的信息
在文本框和密码框中value属性设置为文本框的默认值
使用input标签的,type='radio'来创建单选按钮。单选按钮通过name的值进行分组,name的值相同视为一组。默认选中:checked='checked',简写:checked。value值为单选按钮提交的值
使用input创建复选框:type='checkbox'。复选按钮通过name的值进行分组,name的值相同视为一组。默认选中:checked='checked',简写:checked。value值为复选按钮提交的值
readonly 只读
disable 禁用
checked 选中
-->
<!--
使用lable(标签)标签可以实现文本和表单元素的绑定(点击文本等于点击表单元素)
for属性值 = 需要绑定元素的id值
-->
- select
- 使用select标签创建下拉列表
- 使用option创建列表
- 下拉列表的name属性指定select标签,value属性指定option标签
下拉列表使用selected=’selected‘默认选中
使用multiple='multiple’属性设置多选
使用optaroup对option进行分组,lable设置组名称
-
textarea
- text area创建多行文本框
- cols:设置列数(宽)
- rows:设置列数(高)
-
button
- 默认具有提交功能
- 使用type设置提交类型
<button type='submit' > 提交按钮 </button> <button type='rest'> 重置按钮 </button> <button type='button'> 普通按钮 </button>
-
filedset
- 对表单项进行分组
- legend指定分组名称