目录
1.html的框架
使用 "!" 自动生成框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
2.使用注释
CTRL+/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--这里写注释-->
</body>
</html>
3.标题
<h1> ~ <h6> 标题标签 h1-h6逐渐变小 独占一行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题标签</title>
</head>
<body>
<h1>我是标题</h1>
<h2>我是标题</h2>
<h3>我是标题</h3>
<h4>我是标题</h4>
<h5>我是标题</h5>
<h6>我是标题</h6>
</body>
</html>
效果图:
4.段落标签
<p></p>生成的内容会自动空一行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>这是一个自然段</p>
<p>这是第二个自然段</p>
</body>
</html>
效果图:
5.换行标签
在需要换行的部分后面+</br>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
这里需要换行</br>
换行结果
</body>
</html>
效果图:
6.水平线标签
在需要水平线的地方使用<hr>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>这是标题</h2>
<hr>
这是内容
</body>
</html>
7、文本格式化标签
<strong> </strong>和<b> </b>都是加粗的意思
<em> </em>是斜体
<i style="color:red";> </i>是斜体
<ins> </ins>和<u> </u>都是下划线的意思
<del> </del>是删除线的意思
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p> <strong>这里加粗</strong>,<b>这也是加粗</b> </p>
<p> <em>这里是斜体</em> </p>
<p> <i style="color: rgb(205, 192, 255);">这里是变色</i> </p>
<p> <ins>这里是下划线</ins> <u>这也是下划线</u> </p>
<p> <del>这里显示删除线</del> 如某宝常用的: <del>999</del> 9 </p>
</body>
</html>
效果图:
8.无语义标签
多用于网页布局
<div> </div> 独占一行
<span> </span> 一行可存在多个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- div独占一行 -->
<div>这是第一行</div>
<div>这是第二行</div>
<div>这是第三行</div>
<!-- span一行可存在多个 -->
<span>a</span>
<span>b</span>
<span>c</span>
</body>
</html>
效果图:
9、图片标签
img 是图像嵌入元素
src 指向图片位置 (可以是在电脑本地中的相对路径和绝对路径,也可以是在网络上的图像链接)
alt:图片地址发生错误时,用来提示的字
title:鼠标经过时,显示的文字
border : 边框的大小
width:宽度
height:高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<img src="这里是一个错误的地址" alt="这是当图片地址发生错误时,用来提示的内容 " border="20"> </p>
<img src="https://img1.baidu.com/it/u=3113560374,3342883877&fm=253&fmt=auto&app=120&f=JPEG?" height="400px" title="这是鼠标经过时,显示的文字" border="20">
</body>
</html>
效果图:
10.视频标签
video : 视频标签
width="400px" : 宽度
height="200px" : 高度
controls : 控件(控制播放的媒体 (视频或音频) 的控制条是否显示)
autoplay : 自动播放(大多数的浏览器不允许视频在有声音的情况下自动播放,所以自动播放需要在静音的前提下才可以实现)
muted : 静音播放
poster : 等待加载时的显示图片
loop : 在视频播放结束的时候,自动返回视频开始的地方,继续播放。
src: 和图片标签中的src相似
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>视频标签</title>
</head>
<body>
<video src="image/video.mp4" controls autoplay muted poster="首页.jpg" width="400"height="200" loop></video>
</body>
</html>
11.音频标签
audio : 音频标签
<注>该标签和视频标签相似,详情请看视频标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<audio src="image/music.mp3" controls muted autoplay loop></audio>
</body>
</html>
12.链接标签
<a> </a> : (a元素也称锚元素)可以通过它的 href 属性创建通向其他网页、地址、同一页面内的位置或任何其他 URL(我们所谓的网址) 的超链接。
href : 用于指定目的url
tel:
使用 URL 链接到一个电话号码
mailto:
使用 URL 链接到一个邮箱地址
<注> 链接默认当前窗口打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="http://www.baidu.com/" >这里是链接的名字</a>
<a href="tel:+123456789">链接电话号码</a>
<a href="mailto:m.bluth@example.com">链接邮件</a>
</body>
</html>
效果图:
13.锚链接
id : 类似于身份证,是唯一标识,只能使用一次
<a href="#id"> </a> : 用于跳转的锚链接
<div id="id"> </div> : 点击锚链接后跳转的位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>锚链接</title>
</head>
<body>
填充的内容<br /> 填充的内容<br />
<a href="#这里写id">点击这里跳转至目的地</a> <br>
填充的内容<br />
填充的内容<br /> 填充的内容<br /> 填充的内容<br /> 填充的内容<br /> 填充的内容<br /> 填充的内容<br /> 填充的内容<br /> 填充的内容<br /> 填充的内容<br /> 填充的内容<br /> 填充的内容<br /> 填充的内容<br /> 填充的内容<br /> 填充的内容<br /> 填充的内容<br /> 填充的内容<br /> 填充的内容<br /> 填充的内容<br /> 填充的内容<br /> 填充的内容<br /> 填充的内容<br /> 填充的内容<br /> 填充的内容<br /> 填充的内容<br /> 填充的内容<br /> 填充的内容<br /> 填充的内容<br /> 填充的内容<br /> 填充的内容<br /> 填充的内容<br /> 填充的内容<br /> 填充的内容<br /> 填充的内容<br /> 填充的内容<br />
<div id="这里写id">这里是跳转的目的地</div> 填充的内容<br /> 填充的内容<br /> 填充的内容<br />
</body>
</html>
14.有序列表
ol和li的嵌套(每一项数据单独成行)
type : 若不写,默认以数字排列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
喜欢的食物
<ol type="a">
<li>榴莲</li>
<li>臭豆腐</li>
<li>鲱鱼罐头</li>
<li>奶茶泡饭</li>
</ol>
</body>
</html>
效果图:
15.无序列表
type : 调整列表前面的图案类型(和有序列表的有一些区别)eg:disc 实心圆;circle 表示空心圆;square 表示方块
当涉及到多层嵌套时,为相互区分会改变前面的图案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
你喜欢的明星是?
<ul >
<li>丁真</li>
<li>法外狂徒张三</li>
<ul>
<li>简亨</li>
<li>彭涵</li>
</ul>
<li>罗翔</li>
</ul>
</body>
</html>
效果图:
16.自定义列表
dl,dt,dd嵌套使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<dl>
<dt>
你们喜欢的明星是?
<dd>
张三
</dd>
<dd>
李四
</dd>
<dd>
王五
</dd>
</dt>
</dl>
</body>
</html>
效果图:
17.iframe框架
将另一个 HTML 页面嵌入到当前页面中(目前有很多网站不允许嵌套)
和图片标签类似,该框架也可以调整大小
1.打开网页直接出现嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
我的网页</p>
<iframe src="https://www.taobao.com" width="400px" height="200"></iframe>
</body>
</html>
效果图:
2.点击链接后再出现嵌套
frameborder(已弃用,不推荐) : 值为1(默认值)时,显示此框架的边框。值为0时移除边框。
target : 控制打开链接后的位置
name和target 配合标定跳转的目标
<!DOCTYPE html>
<html lang="en">
<head><script type="text/javascript" src="/___vscode_livepreview_injected_script"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="https://www.taobao.com" target="nn">去淘宝</a>
<iframe name="nn" frameborder="0" width="800px" height="200px"></iframe>
</body>
</html>
效果图:
18.特殊字符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
小于符号 : <<p>
大于符号: ></p>
空格:
填充字符</p>
度:°
</div>
</body>
</html>
效果图:
19.元素显示模式
块元素 : 独占一行 ; 如div ; 宽 高 内外边距都可设置
行内元素 :一行可存在多个 ; 如span ;宽 高 内边距不可设置
行内块元素:一行可存在多个 ;如input ; 宽 高 内外边距都可设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>牛逼</div>
<span>nb</span>
</body>
</html>
效果图:
可以看出div中的内容占了一行的位置;span中的内容只占了字符所需的位置
20.表格标签:
border(只控制最外围边框厚度大小)
width、height :宽 高 (tbody中的值是底线,只高不低)
cellspacing : 单元格与单元格之间的距离
align : 数据水平方向位置
valign : 数据垂直方向位置
colspan="5" : 将横排的5个单元格合并
rowspan="2" : 将竖排的2个单元格合并
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- td 跨行:rowspan
跨列:colspan
-->
<table border="1px" width="800px" cellspacing="0">
<!-- 表头 rows data-->
<caption>学生信息</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>民族</th>
<th>政治面貌</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">王鑫宇</td>
<td>男</td>
<td>18</td>
<td>汉</td>
<td>党员</td>
</tr>
<tr>
<td>男</td>
<td>18</td>
<td>汉</td>
<td>党员</td>
</tr>
<tr>
<td>王鑫宇</td>
<td>男</td>
<td>18</td>
<td>汉</td>
<td>党员</td>
</tr>
<tr>
<td>王鑫宇</td>
<td>男</td>
<td>18</td>
<td>汉</td>
<td>党员</td>
</tr>
</tbody>
<tfoot>
<tr align="right">
<td colspan="5">共计:4人</td>
</tr>
</tfoot>
</table>
</body>
</html>
效果图:
22.details
<tetails> : 展开后的内容
<summary> : 展开前的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<details>
<summary>有志青年</summary>
我们这里都是优秀的有志青年
</details>
</body>
</html>
效果图:
23.tabindex
<tabindex> : 让本不能tab遍历获取焦点的元素可以获取 可以为负数(不可以使用tab聚焦),0(按顺序使用tab聚焦),正数(tab优先聚焦且数字越小越优先)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text">
<a href="www.baidu.com">去百度</a>
<div>我是第一个盒子</div>
<div tabindex="1">我是第2个盒子</div>
<div>我是第3个盒子</div>
<div>我是第4个盒子</div>
</body>
</html>
23.表单的基本结构
表单:网页交互区,收集用户信息
<form> : 表单都应写在< form>中
action : 指向表单中数据提交地址
name: 所有表单的必有属性
method:提交方式
<button> : 按钮
/s : 百度的搜索框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单的基本结构</title>
</head>
<body>
<form action="https://www.baidu.com/s">
<input type="text" name="wd">
<button>提交</button>
</form>
</body>
</html>
24.常见的表单元素
文本框: value="" (刚打开时文本框里的内容) placeholder="" : 文本框中的提示词
单选框、多选框 : 一组单/多选中name必须相同, 必须写value , label : 标签 , chicked : 默认选择
隐藏域 : 在网页无法看到,可用value输入内容
下拉菜单 : selected :默认选择
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>常见的表单元素</title>
</head>
<body>
<form action="#">
<!-- 文本框 maxlength:最大长度-->
用户名:<input type="text" name="user" value="" maxlength="6" placeholder="请输入用户名:"><br />
<!-- 密码 -->
密码:<input type="password" name="pwd"><br />
<!-- 单选框 -->
<input type="radio" name="gender" value="nan">男
<input type="radio" name="gender" value="nv">女<br />
<!-- 多选框 label标签-->
<input type="checkbox" name="food" id="liulian"><label for="liulian">吃榴莲</label>
<label><input type="checkbox" name="food">吃臭豆腐</label>
<!-- checked默认选中 -->
<input type="checkbox" name="food" checked>吃肥肉
<!-- 隐藏域 -->
<input type="hidden" name="hid" value="这里的内容只有自己能看到">
<!-- 确认按钮 -->
<button type="submit"></button>
<!--重置按钮 -->
<input type="reset">
<!-- 普通按钮 -->
<input type="button">
<!-- 文本域 -->
<textarea cols="20" rows="10" maxlength="200
">
</textarea><br />
<!-- 下拉菜单 -->
<select name="jiguan" id="">
<option value="南京">南京</option>
<!-- selected下拉菜单的默认选中 -->
<option value="成都" selected>成都</option>
<option value="西安">西安</option>
</select>
<input type="submit">
</form>
</body>
</html>
效果图 :
25.html的全局属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- id身份证号,在一个页面中只能出现一次 -->
<div id="one"></div>
<!-- class 一类 可以出现多个-->
<div class="pink">我是哟个盒子</div>
<div class="pink">我是哟个盒子</div>
<!-- accesskey 设置快捷键 -->
<form action="#">
<input type="text" name="a">
<button accesskey="s">提交</button>
</form>
<!-- style -->
<!-- data-* 自定义属性 -->
</body>
</html>