目录
1、HTML框架
<!-- 文档声明，声明当前网页的版本 -->
<!doctype html>
<!--html的根标签（根元素），网页中的所有内容都要写入根元素-->
<html>
<!--head是网页的头部，head中的内容不会在网页中直接出现，主要帮助浏览器或搜索引擎解析网页-->
<head>
<!-- meat标签用来设置网页的元数据，这里的meta用来设置网页的字符集，避免乱码问题-->
<meta charset="utf-8">
<!-- title 中的内容会显示在浏览器的标题栏，搜索引擎会主要根据title中的内容来判断网页中的主要内容-->
<title>网页的标题</title>
</head>
<!-- body是HTML的子元素，表示网页的主体，网页中所有的可见内容都应该写在body中 -->
<body>
<!--h1:网页的一级标题-->
<h1>网页的一级标题</h1>
</body>
</html>
<!--
在网页中编写的多个空格默认情况会被浏览器解析为一个空格
在HTML中不能直接书写特殊符号，比如多个连续的空格，字母两侧的<>等
如需要书写特殊字符，则需要使用html中的实体/转义字符
实体的语法：&实体名字：
 ；空格
>；大于号
<；小于号
©版权符号
-->
<!--
在网页中HTML专门负责网页的结构，所以在使用中应该关注标签的语义而不是样式
标题标签：h1~h6 一共有六级标题，h1~h6重要性递减
h1的重要性仅次于title标签
一般情况下标题标签只会使用h1~h3
在页面中独占一行的元素称为块元素
标题标签都是块元素
-->
<!-- hgroup标签用来为标题分组，可以将一组相关的标题同时放入hgroup -->
<hgroup>
<h1>回乡偶书两首</h1>
<h2>其一</h2>
</hgroup>
<!-- p标签表示页面中的段落
p也是一个块元素
-->
<p><em>可惜</em>没能迎来和你热烈的夏天</p>
<!--em标签用于表示语音语调的加重，em不会换行，称为行内元素 -->
<p>你需领先于一切<strong>别离</strong>，仿佛他们全在你身后</p>
<!-- strong 标签用于表示强调重要内容，属于行元素 -->
里尔克说
<blockquote>使你过冬之心终将熬过</blockquote>
<!-- blockquote表示一个长引用，独占一行，属于块元素 -->
瓦尔登湖：<q>我看到那些岁月如何奔驰，挨过了冬季，便迎来了春天</q>
<!-- q表示短引用，会自动加引号，不会换行，属于行内元素 -->
<br>为什么乌鸦像写字台
<!-- br标签表示换行 -->
<!--
meta主要用于设置网页的元数据，元数据不是给用户看的
meta的主要属性：
charset：指定网页的字符集
name：指定的数据的名称
content：指定的数据的内容
-->
<meta name="keywords" content="HTML,前端">
<!-- keywords:表示网站的关键字，可以同时指定多个关键字，关键字之间用逗号隔开 -->
<meta name="description" content="这是一个非常不错的网站">
<!-- description:用于指定网站的描述，网站的描述会显示在搜索引擎的搜索结果中 -->
<meta http-equiv="refresh" content="3;url=https://www.baidu.com">
<!-- 将页面重定向到另一个网站（3秒后跳转到url后的网站） -->
<title>Document</title>
<!-- title标签的内容会作为搜索结果的超链接上的文字显示 -->2、块元素
<!--
块元素（block element）
在网页中通过块元素对网页进行布局
行内元素（inline element）
行内元素主要用来包裹文字
一般情况下会在块元素中放行内元素，但不会在行内元素中方块元素
p元素中不能放任何块元素
浏览器在解析网页时会自动对网页中不符合规范的内容进行修正
比如：标签写在了根元素的外部
p元素中嵌套了块元素
根元素中出现了head，body以外的子元素
浏览器中右击--检查/F12--开发者模式--Elements-网页源码
-->
<!-- 块元素
header：表示网页的头部（或某一部分的头部）
main：表示网页的主体部分（一个网页只有一个主体）
footer：表示网页的底部（或某一部分的底部）
nav：表示网页中的导航
aside：和主体相关的其他内容（如解释说明）
article：表示一个独立的文章
section：表示一个独立的区块，上边的标签都不能表示时可以用section
div：没有语义，用来表示区块（使用最多，可以代替上面所有）
span：行内元素，没有任何使用，一般用于在网页中选中文字
-->
<span>我住长江头，君住长江尾</span>
<div>日日思君不见君，共饮长江水</div>
<nav>linabell </nav>
<nav>duffy</nav>3、列表
<!--
列表（list）
HTML中列表一共有三种：
1.有序列表：ol；使用li表示列表项
2.无序列表：ul；使用li表示列表项
3.定义列表：dl；；使用dt来表示定义的内容；用dd来对内容进行解释说明
列表之间可以互相嵌套
-->
<ol>
<li>洛池不见青春色，白杨但有风萧萧</li>
<ul>
<li>各人自扫门前雪，莫管他人瓦上霜</li>
<li>孤舟蓑笠翁，独钓寒江雪</li>
<li>上回路转不见君，雪上空留马行处</li>
<li>最爱东山庆后雪，软光红里涌银山</li>
<li>云横秦岭家何在，雪拥蓝关马不前</li>
<li>花自飘零‘雪’自流</li>
<li>乱石穿空，惊涛拍岸，卷起千堆雪</li>
<li>靖康耻，犹未雪</li>
</ul>
</ol>4、超链接
<!--
超链接可以让我们从一个页面跳转到另一个页面或其他页面的其他位置
使用<a>标签来定义超链接
属性：b
href：指定跳转的目标路径;值可以是一个外部网站的网址，也可以是一个内部页面的地址
超链接紫色表示去过的网址，蓝色表示没去过的网址
超链接<a>也是一个行内元素。在<a>标签中可以嵌套任何元素，除了它自身
-->
<a href="https://www.baidu.com">超链接</a><!--alt+shift+上箭头/下箭头：向上/向下复制-->
<br><br> <!-- br*2+tab键：两个换行-->
<a href="https://www.baidu123.com">超链接</a>
<a href="07 列表.html">超链接</a>
<!--
当我们需要跳转到服务器内部的页面时，一般使用相对路径
相对路径一般以.或..开头：
./ 可以省略 表示当前文件所在目录 在本示例中则表示path这个文件
../ 表示当前文件所在目录的上一级目录
-->
<a href="./09 相对路径.html">超链接</a>
<br>
<a href="../08 超链接.html">上一级目录</a>
<br>
<a href="./inner/target.html">./表示当前目录</a>
<a href="07 列表.html">超链接：刷新当前页面</a>
<br>
<a href="#bottom">去底部</a> <!--转到底部的超链接，给底部超链接添加id属性-->
<br>
<!--
属性：target：用来指定超链接打开的位置
可选值：
self：默认值，在当前页面打开超链接
blank：在一个新的页面中打开超链接
-->
<a href="07 列表.html" target="_blank">超链接：在新的页面中打开</a>
<br>
<!-- lorem+回车：自动生成英文文本 -->
<!--
href属性设置为#，点击超链接回到页面顶部
#+目标元素的id属性值：跳转到页面的任意位置（#与id之间没有空格）
id属性：唯一标识，同一页面不能出现重复的id属性
一般是字母开头，不能以数字开头
-->
<a id="bottom" href="#">回到顶部</a>
<br>
<!-- 在开发中可以将#作为超链接的路径的占位符
可以使用 javascript:; 作为href属性，此时点击这个超链接什么都不会发生 -->
<a href="#">占位符</a>
<a href="javascript:;">不会跳转的占位符</a>5、图片标签
<!--
图片标签用于向当前页面引入一个外部图片
使用img标签引入外部图片，img标签是自结束标签
src属性指定外部图片的路径(路径规则和超链接一样)
img这种元素属于替换元素（基于块元素和行内元素之间，具有两种元素的特点），但不换行
alt属性：图片的描述，默认情况下不会显示，但某些浏览器会在图片加载不出来时显示
搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所收录
width 图片宽度（单位是像素）
height 图片的高度
宽度和高度中如果只修改了一个，则另一个会等比例缩放
注意：一般情况下在pc端，不建议修改图片的大小（改小：浪费内存；改大：图片失真）需要多大裁多大
但在移动端， 经常需要对图片进行缩放（主要是大图缩小）
图片的格式：
jpeg（jpg）：支持的颜色比较丰富，不支持透明效果，不支持动图 一般用来显示照片 照片
gif：支持的颜色比较少，支持简单透明，支持动图 适合表示颜色单一的图片，动图 logo
png：支持的颜色丰富， 支持复杂透明，不支持动图 颜色丰富，复杂透明图片（专为网页而生）水流等
webp ：谷歌新推出的专门用来表示网页中的图片的一种格式
具备其他图片格式的所有优点，而且文件还小
缺点：兼容性不好
base64：将图片使用base64进行编码，这样可以直接将图片转换为字符，通过字符的形式来使用
需要和和网页一起加载的图片才会使用base64
直接搜索base64可在线转码
效果一样，用小的；效果不一样，用效果好的（gif最小）
-->
<img src="./Saved Pictures/李汶翰.JPG" alt="李汶翰" width="200">
<img src="https://img0.baidu.com/it/u=1958692357,2756805310&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" >
<img src="data:image/jpeg;base64,/9j.....”>
<!--
内联框架：用于向当前页面中引入一个其他页面
src：指定要引入的网页的路径
frameborder:指定内联框架的边框
-->
<iframe src="https://www.qq.com" width="800" height="800" frameborder="0"></iframe>6、音、视频标签
<!--
音视频文件引入时，默认情况下不允许用户自己控制播放停止
常见的音频文件格式：MP3；ogg
常见的视频文件格式：MP4；webm
audio：用来向页面中引入一个外部的音频文件
video：用来向页面中引入一个外部的音频文件
属性：
controls：是否允许用户控制播放
autoplay ：音频文件是否自动播放；如果设置了autoplay,则音乐在页面打开时会自动播放，但目前大部分浏览器不会对音乐进行自动播放
loop：音乐是否循环播放
-->
<!-- <audio src="./source/李汶翰moonlight .mp3" controls loop></audio>></audio> -->
<!--
除了通过src来指定外部文件，还可以通过source来指定文件
写两个source，只会显示一个音频，第一个音频格式该浏览器不兼容时第二个音频文件才会显示，两个文件都不兼容时显示文字
-->
<!-- <audio controls>
对不起您的浏览器不支持音频播放，请升级浏览器！
<source src="./source/李汶翰moonlight .mp3">
<source src="./source/天黑黑.mp3">
</audio> -->
<!--
embed：在老版本（IE8）中插入音视频文件，会自动播放 ，需设置长和宽控制大小
type:大类型+具体格式
-->
<!-- <embed src="./source/天黑黑.mp3" type="audio/mp3" width="" height=""> -->
<!-- 结合 -->
<audio controls>
<source src="./source/李汶翰moonlight .mp3">
<source src="./source/天黑黑.mp3">
<embed src="./source/天黑黑.mp3" type="audio/mp3" width="" height="">
</audio>
<video controls>
<source src="./source/小城夏天.mp4">
<embed src="./source/小城夏天.mp4" type="video/mp4" width="400" height="400">
</video>
<!-- 外部视频：分享--嵌入代码-直接复制 -->
<iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=t0020xbxkq1" allowFullScreen="true"></iframe>7、表格
边框由border属性设置8
<head>
<title>Document</title>
</head>
<body>
<!--
在现实生活中，经常需要用表格来表示一些格式化数据；
课程表、人名单、成绩单……
同样在网页中也需要表格，通过table标签来创建表格
-->
<table border="1" width="25%" align="center">
<!-- 在table中使用tr来表示表格中的一行，有几个tr就有几行 -->
<tr>
<!-- 在tr中使用td表示单元格，有几个td就有几个单元格 -->
<td>A1</td>
<td>B1</td>
<td>C1</td>
<!-- rowspan 纵向的合并单元格 -->
<td rowspan="2">D1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
<!-- colspan 横向的合并单元格 -->
<td colspan="2">C3</td>
</tr>
</table>
</body>8、长表格
<head>
<title>Document</title>
</head>
<body>
<table border="1" width="25%" align="center">
<!--
可以将一个表格分为三部分：
头部 thead
主体 tbody
底部 tfoot
th表示头部的单元格，可以代替td，有居中加粗效果
-->
<thead>
<tr>
<th>日期</th>
<th>收入</th>
<th>支出</th>
<th>合计</th>
</tr>
</thead>
<tbody>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td>合计</td>
<td>300</td>
</tr>
</tfoot>
</table>
</body>9、表格样式
display：table-cell使得父元素和子元素的外边距分离，可以通过设置margin的偏移量使子元素在父元素中垂直居中；也可通过vertical-align使子元素在垂直方向居中，水平方向居中只能通过margin
<head>
<title>Document</title>
<style>
table{
width:25%;
border: 1px solid black;
margin: 0 auto;
/* border-spacing: 指定边框之间的距离 */
border-spacing: 0px;
/* border-collapse: 设置边框的合并 */
border-collapse: collapse;
}
td{
border: 1px solid black;
height: 20px;
/* 默认情况下元素在td中是垂直居中的 可以通过vertical-align来设置 */
vertical-align: middle;
text-align: center;
}
/*
如果表格中没有使用tbody而是直接使用tr
那么浏览器会自动创建一个tbody，且将tr全放到tbody中
tr不是table的子元素
*/
tbody>tr:nth-child(2n){ /*偶数行变色*/
background-color: #bfa;
}
.box1{
width: 300px;
height: 300px;
background-color: orange;
/* 将元素设置为单元格td */
display: table-cell;
text-align: center;
vertical-align: middle;/*元素垂直居中*/
}
.box2{
width: 100px;
height: 100px;
background-color: yellow;
margin: 0 auto;/*元素水平居中*/
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<table>
<tr>
<td>学号</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>地址</td>
</tr>
<tr>
<td>1</td>
<td>孙悟空</td>
<td>男</td>
<td>18</td>
<td>花果山</td>
</tr>
<tr>
<td>2</td>
<td>猪八戒</td>
<td>男</td>
<td>28</td>
<td>高老庄</td>
</tr>
<tr>
<td>3</td>
<td>沙和尚</td>
<td>男</td>
<td>38</td>
<td>流沙河</td>
</tr>
<tr>
<td>4</td>
<td>唐僧</td>
<td>男</td>
<td>16</td>
<td>女儿国</td>
</tr>
</table>
</body>10、表单
表示将表单提交给服务器
<head>
<title>Document</title>
</head>
<body>
<!--
表单：
在现实中用于提交数据
在网页中也可以使用表单，网页中的表单用于将本地的数据提交给远程的服务器
使用form标签来创建表单
-->
<!--
form的属性
action 指定表单要提交的服务器的地址
-->
<form action="target.html">
<!-- 添加表单项 -->
<!--
文本框
注意：数据要提交到服务器，必须要为元素指定一个name
-->
文本框<input type="text" name="username">
<br><br>
<!--
密码框
-->
密码框<input type="password" name="password">
<br><br>
<!--
选择框：必须要指定一个value属性，value属性最终会作为用户填写的值提交给服务器
单选按钮 必须有相同的name属性才能起到单选效果
checked 可以将单选按钮设置为默认选中
-->
单选按钮<input type="radio" name="hello" value="a">
<input type="radio" name="hello" value="b" checked>
<br><br>
<!--
多选框
-->
多选框<input type="checkbox" value="1">
<input type="checkbox" value="2">
<input type="checkbox" value="3" checked>
<br><br>
<!-- 下拉列表 selected可设置为默认选项-->
下拉列表<select name="haha" id="">
<option value="i">选项一</option>
<option value="ii">选项二</option>
<option value="iii" selected>选项三</option>
</select>
<br><br>
<!-- 提交按钮 -->
<input type="submit" value="注册">
</form>
</body>
<head>
<title>Document</title>
</head>
<body>
<form action="target.html" autocomplete="off">
<!--
autocomplete="off"关闭自动补全 不会提示之前填过的内容
readonly 将表单设置为只读 数据会提交
disabled 将表单设置为禁用 数据不会提交
autofocus 设置表单项自动获取焦点（光标自动在该表单内）
-->
<input type="text" name="username" value="a" autocomplete="off">
<br><br>
<input type="text" name="username" value="b" readonly autofocus>
<br><br>
<input type="text" name="username" value="c" disabled>
<br><br>
<!-- 用来选择颜色 IE不支持 -->
<input type="color">
<br><br>
<!-- 需要输入邮件格式 -->
<input type="email">
<br><br>
<input type="submit">
<!-- 重置按钮 -->
<input type="reset">
<!-- 普通的按钮 -->
<input type="button" value="按钮">
<br><br>
<!-- 与上面三个按钮功能相同，input是自结束标签 ，button使用更加灵活-->
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>
</form>
</body>
扫一扫
6767
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
