单标签
- < hr> 放在body标签里表示横线
- < br> 在body标签里表示换行
- 注释符号
- <img src = '1.jpg' title = '鼠标放图片上的文字提示' alt = ' 给搜索引擎看的' width = 500> 在body标签里插入图片 为多媒体标签
双标签
- <h1></h1>,,,<h6></h6> 在body里的标题标签
- <p></p> 段落标签
- <strong></strong> 文字加粗
- <em></em> 斜体显示
- <ins></ins> 文字加下划线 或者<u></u>
- <font color = 'red' size = 1>帅哥</font> 给文字加颜色和大小 size在10以内
- <del>帅哥</del> 文字删除线
- <div></div>和<span></span>在网页布局中用，但是没有语义
超链接
实现页面跳转 使用a标签
<a href = 'https://www.baidu.com/' title = '超链接'>去找百度吧</a>
target 属性为_blabk表示在新窗口表示 为_self表示在默认自身窗口打开
可以实现优化 在head标签里<base target= '_blank'> 可以在后面不必重复写 target= '_blank'
title 属性表示鼠标放在文字内容那里提示内容
在href = ‘#’ 时跳转本页面
在标签里加id 属性 把属性名字放#后面就是一个锚链接 （回到顶部的使用）
特殊符号
表示空格
<p> 表示<p>
语义标签
<nav></nav> 表示导航的语义标签。<div></div>与他的用法相同
<header></header> 网页布局中头部 与<div></div>作用相同
<footer></footer>网页布局中的尾部，与<div></div>作用相同
<article></article>表示文章，与<div></div>作用相同
<aside></aside>网页布局中侧边栏的部分，与<div></div>作用相同
列表
-
有序列表
image.png
效果
image.png -
无序列表
效果
-
自定义列表
image.png
其中dd相当于上面的li
效果
image.png
多媒体
- 视频
<video></video>
video里的属性：src(路径）
controls （显示控制栏）
l loop(自动循环）
atuoplay(自动播放）
注意现在的chorm浏览器下autoplay属性没有用，必须要用户与之交互，亲测ie里面autopaly可以用，在chorm可以添加muted属性 可以使视频文件变成静音的可以自动播放
或者以这种方式
image.png - 音频
<audio src = '' controls loop autoplay></audio>
与视频标签一样 也可以加width属性
meta
<meta charset = 'utf-8'> 防止网页乱码
<meta name = 'keywords' content = '日用百货，卫生纸，牙刷'> 设置网页关键字，属于网页优化的一种便于搜索引擎看到
<meta name="description" content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。"> 设置网页描述信息
<meta http-equiv = 'refresh' content = '3;https://www.baidu.com/'> 设置网页重定向 跟超链接类似 但不用人为去点击
link
<link rel = 'icon' href = '1.png'> 设置网页图标 一般把图标照片放到根目录下，一般用ico格式的照片，比较节省时间，用其他格式也可以
表格（table）
效果
- 属性
border 加边框
width height 决定宽高
cellspacing 设置td与td之间的距离，默认值为2
th标签 自动设置表头
image.png
image.png
align 设置对齐方式
将align 属性设置到table标签时 只会改变整个表格在浏览器界面的对齐方式
image.png
效果
image.png
becolor 设置背景色
花里胡哨的就不演示了
cellpadding ：设置内容与边框之间的距离 放在table标签里
caption ： <caption><h3>人员信息表</h3></caption>设置表格标题的标签，为了加粗可以把里面的文字用标题标签加粗
效果图
image.png
表格的基本结构
<body>
<table border = '1' width = '400' height = '500' cellspacing = '0' align = 'center' >
<caption><h3>人员信息表</h3></caption>
<thead>
<tr> <!--行元素-->
<th>姓名</th> <!--列元素-->
<th>年龄</th>
<th>籍贯</th>
</tr>
</thead>
<tbody>
<tr> <!--行元素-->
<td>张三</td> <!--列元素-->
<td>18</td>
<td>公安</td>
</tr>
</tbody>
<tfoot>
<tr> <!--行元素-->
<td>李四</td> <!--列元素-->
<td>17</td>
<td>章田</td>
</tr>
</table>
</body>
上述代码表示的才是正确的表格格式，一般那些thead tbody tfoot不用写
合并单元格
-
横向合并
colspan 属性横向合并 注意把多出的列删掉
-
纵向合并
image.png
rowspan 纵向
效果
image.png
细线表格
效果
*注意把border属性去掉，要不然效果是这样的
表单（重点）
作用：收集用户填入数据
表单域 <form></form>
表单域属性：1.action 2.method (有get和post两个方法）
表单控件：1. 邮箱： <input type='text' maxlength='5' name='email' placeholder='请输入邮箱地址‘>
- 密码：<input type='password' maxlength='5' name='pwd' placeholder='请输入密码‘>
- <input type='submit'> 提交按钮
- <input type='checkbox' name='' checked>写代码
<input type='checkbox' name=''>学习
<input type='checkbox' name=''>看电影 多选框 - <input type="radio" name='123' >男
<input type="radio" name='123'>女 单选框 name属性必须一样
效果：
-
上传文件： <input type='file' name=''>
效果:
image.png -
一系列小按钮（前两个为提交按钮）
image.png
效果：
image.png
注意：
image.png
智能表单
新增表单属性
增加得表单属性
效果：
