这篇博客详细介绍了HTML5的常见元素、属性、新增元素及CSS3的基础使用，包括选择器、文本与文本相关属性、背景与边框属性、表格与列表属性以及变形与动画相关属性。通过学习，读者能深入理解HTML5与CSS3在网页设计中的应用。
第一部分 HTML5
HTML：超文本标记语言 将数据进行基础的排版 根据标签的定义进行语义或排版
1.1 HTML5常见元素与属性
1.1.1 基本元素
- html：HTML文档的根标签
- head：页面的头部，存放的是一些关于页面的设置等信息，不会当成正文显示在网页里
- body：页面的主体，正文，其内容都会呈现在网页中
- title：网页的标题
- meta：主要用于设置网页内容
- style：用于使用CSS样式表
- h1-h6：标题1-标题6，块级元素
- p：段落，块级元素，段前段后间距
- span：一段文字，内联元素，不换行
- font：字体标签，内联
- hr：一条水平线，块级
- div：盒子，容器，文档的节，主要用于页面布局，块级，它可以容纳很多其他元素
<!--声明为HTML5文档-->
<!DOCTYPE html>
<!--HTML的根标签-->
<html>
<!--页面头部信息-->
<head>
<title>01基本元素</title>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
</head>
<!--页面主体信息-->
<body>
<h1>这是h1</h1>
<h6>这是h6</h6>
<!-- #RGB #RRGGBB 0~F -->
<span>
<font color="#FF1188">
这是一句孤立的话
</font>
</span> <br>
<span>
<font color="#00f">
这也是一句孤立的话
</font>
</span>
<p align="center">
这是一段话
</p>
<hr>
<p align="right">
这又是一段话
<span>
<font color="#00f">
这也是一句孤立的话
</font>
</span>
</p>
<div style="background-color: aqua; width: 50%;height: 200px;">
<p align="center">
这是div1中的一段话
</p>
</div>
<div style="background-color: brown;">
<p align="center" style="color:aliceblue">
这是div2中的一段话
</p>
</div>
</body>
</html>
1.1.2 文本格式化元素
- b/strong：加粗
- i/em：斜体
- sup：上标文本
- sub：下标文本
- small：小号文本
- big：大号文本
- bdo：文本方向 dir属性来标记文本方向 ltr rtl
<!DOCTYPE html>
<html>
<head>
<title>02文本格式化元素</title>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
</head>
<body>
<span>
<b><i>加粗斜体文本</i></b>
</span>
<br>
<span>
<small>小号文本</small><br>
<big>大号文本</big><br>
</span>
<!--An=A1+(n-1)*d-->
<p>
A<sub>n</sub>=A<sub>1</sub>+(n-1)*d<br>
</p>
<!-- 2^x=n 推出 x=log2n-->
<p>
2<sup>x</sup>=n 推出 x=log<sub>2</sub>n<br>
</p>
<bdo dir="ltr">
JavaPythonC++
</bdo>
<br>
<bdo dir="rtl">
JavaPythonC++
</bdo>
</body>
</html>
常见的转义字符
<：<>：> ：空格¥：￥"："÷：÷©：©®: ®
1.1.3 语义相关元素
- abbr：缩写，用title属性来标记全称
- address：地址，块级元素
- blockquote：长段引用，用cite属性标记引用的出处 块级元素
- q：短引用，用cite属性标记引用的出处，默认加双引号
- cite：表示作品的名称
- code：表示一段代码 块级
- pre：预格式化 块级
- kbd：键盘录入标记
- dfn：专业术语
- var：变量标签
- del：删除文本
- ins：插入文本
<!DOCTYPE html>
<html>
<head>
<title>03语义相关元素</title>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
</head>
<body>
<abbr title="西安鸥鹏互联科技有限公司">西安鸥鹏</abbr><br>
西安鸥鹏的地址是<address>陕西省西安市自力大厦</address>
呵呵呵<br>
<blockquote>
北国风光，千里冰封，万里雪飘，望长城内外，惟余莽莽，大河上下，顿失滔滔，山舞银蛇，原驰蜡象，欲与天公试比高，须晴日，看红装素裹，分外妖娆，江山如此多娇，引无数英雄竞折腰，惜秦皇汉武，略输文采，唐宗宋祖，稍逊风骚，一代天骄，成吉思汗，只识弯弓射大雕，俱往矣，数风流人物，还看今朝。
</blockquote>
<q>Java很好学，呵呵~</q>
上述话是<cite>鸥鹏张老师</cite>说的
<br>
<code>
#include<stdio.h><br>
void main(){
<br>
printf("HelloWorld!");<br>
}
</code>
<pre>
#include<stdio.h>
void main(){
printf("HelloWorld!");
}
</pre>
呵呵
众所周知<kbd>ctrl + c</kbd>是复制<br>
在Linux中<kbd>list -l</kbd>显示当前目录的信息<br>
<dfn>HTML</dfn>是超文本标记语言<br>
<var>i</var>+<var>j</var>=10
在Java多线程中，<del>stop()</del>方法已经过时，推荐使用<ins>interrupt()</ins>
</body>
</html>
1.1.4 超链接和锚点
只有一个标签<a>,有如下几个重要的属性：
- href：所链接到的资源，可以是本地的，也可以是互联网上的
- target：新链接的打开方式，
_self，_blank - media：媒体类型
<!DOCTYPE html>
<html>
<head>
<title>04超链接与锚点</title>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
</head>
<body>
<a href="04超链接与锚点.html#end">点击此处到达文章末尾</a>
<a href="http://www.baidu.com" target="_self">点击打开百度</a><br>
<a href="http://www.baidu.com" target="_blank">点击打开百度</a><br>
<a href="C:\Users\HENG\Desktop\WebDay01\01基本元素.html" target="_blank">打开01基本元素.html</a><br>
<a href="http://www.baidu.com">
<img src="logo.jpg" width="100px">
</a><br>
<!--做一个锚点-->
<a name="end">这是一个页面的结尾锚点</a>
</body>
</html>
1.1.5 列表相关元素
- ul：无序列表
- type属性：circle、disc、square
- ol：有序列表
- type属性：1，A，I
- start：起始编号
- li：有序和无序列表的子选项
- dl：自定列表
- dt：自定义分类
- dd：自定义的选项
<!DOCTYPE html>
<html>
<head>
<title>05列表相关</title>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
</head>
<body>
<ul type="square">
<li>java</li>
<li>C++</li>
<li>Python</li>
</ul>
<ol type="I" start="2">
<li>java</li>
<li>C++</li>
<li>Python</li>
<li>java</li>
<li>C++</li>
<li>Python</li>
</ol>
<dl>
<dt>宇智波家族有谁：</dt>
<dd>啥是gay</dd>
<dd>一打七</dd>
<dd>马达拉</dd>
<dt>千手家族有谁：</dt>
<dd>大奶牛</dd>
<dd>哈希他妈</dd>
</dl>
</body>
</html>
1.1.6 图形图形相关元素
img标签主要用于表示一个图像，有这么几个重要的属性：
- src：图片的路径 可以是本地的 可以是网络上的
- width：宽度
- height：高度
- alt：如果图片加载不出来，则用alt文本表示
- title：图片的文字说明
- bodder：边框
<!DOCTYPE html>
<html>
<head>
<title>06图形图像</title>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
</head>
<body>
<img src="logo.jpg" width="400px" title="迪丽热巴我爱你"/><br>
<img src="logo.jpg" height="200px" border=10/><br>
<img src="https://bkimg.cdn.bcebos.com/pic/37d3d539b6003af33a87a65fc160d15c1038534318f3?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2UxMTY=,g_7,xp_5,yp_5" height="100px"/>
<br>
<img src="" alt="图片正在加载"/>
<p>
这位是我的媳妇<img src="logo.jpg" height="200px"><br>
这位是我的媳妇<img src="logo.jpg" height="200px" align="center"><br>
这位是我的媳妇<img src="logo.jpg" height="200px" align="top"><br>
这位是我的媳妇<img src="logo.jpg" height="200px" align="bottom"><br>
这位是我的媳妇<img src="logo.jpg" height="200px" align="middle"><br>
这位是我的媳妇<img src="logo.jpg" height="200px" align="left"><br>
这位是我的媳妇<img src="logo.jpg" height="200px" align="right"><br>
</p>
<hr>
<br>
<img src="logo.jpg" usemap="#Map"/>
<map name="Map">
<area shape="circle" coords="402,299,23" href="http://www.newcoder.com" target="_blank">
<area shape="rect" coords="456,251,485,319" href="http://www.newcoder.com" target="_blank">
<area shape="poly" coords="400,365,446,268,446,381" href="http://www.newcoder.com" target="_blank">
</map>
</body>
</html>
电影海报页面
<!DOCTYPE html>
<html>
<head>
<title>练习01电影页面</title>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
</head>
<body>
<!--标题栏-->
<div style="margin-top: 20px;padding: 20px;">
<h1>热门电影版块</h1>
<hr color="#CCC" size="1">
<span><strong>最近热门电影</strong></span>
<span style="margin-left: 50px;">热门</span>
<span style="margin-left: 50px;">最新</span>
<span style="margin-left: 50px;">豆瓣高分</span>
<span style="margin-left: 50px;">欧美</span>
<span style="margin-left: 50px;">日韩</span>
<span style="margin-left: 50px;">国产</span>
<span style="margin-left: 50px;">冷门佳片</span>
<span style="margin-left: 50px;">更多>></span>
<hr color="#CCC" size="1">
</div>
<!--海报行-->
<div style="height: 400px; margin-top: 20px;">
<img src="movie01.jpg" width="23%" height="90%">
<img src="movie02.jpg" width="23%" height="90%">
<img src="movie03.jpg" width="23%" height="90%">
<img src="movie04.jpg" width="23%" height="90%">
</div>
<!--电影名-->
<div style="height: 50px;margin-top: 10px;">
<span style="font-size: 25px;width: 23%;">
<a href="magnet:?xt=urn:btih:5c839b8e2f8d73d813353b2c572f4170c2353bde&dn=%e9%98%b3%e5%85%89%e7%94%b5%e5%bd%b1www.ygdy8.com.%e6%88%91%e5%92%8c%e6%88%91%e7%9a%84%e5%ae%b6%e4%b9%a1.HD.1080p.%e5%9b%bd%e8%af%ad%e4%b8%ad%e8%8b%b1%e5%8f%8c%e5%ad%97.mp4&tr=udp%3a%2f%2ftracker.opentrackr.org%3a1337%2fannounce&tr=udp%3a%2f%2fexplodie.org%3a6969%2fannounce&tr=udp%3a%2f%2fexodus.desync.com%3a6969%2fannounce">我和我的家乡</a>
</span>
<span style="font-size: 25px;width: 23%;margin-left: 120px;">
<a>沐浴之王</a>
</span>
<span style="font-size: 25px;width: 23%;margin-left: 170px">
<a>雪谷之狼</a>
</span>
<span style="font-size: 25px;width: 23%;margin-left: 170px">
<a>一秒钟</a>
</span>
</div>
</body>
</html>
1.1.7 表格相关元素
- table：表示表格的标签，最多有一个caption表格标题，最多有一个theader表头，最多有一个tfoot表尾，多个tr行，多个td单元格，多个th加粗的tr
- cellspacing：单元格与单元格之间的间距
- cellpadding：单元格内的内边距
- width：表格的宽度
- align：表格内容的对齐方式
- bgcolor：表格的背景颜色
- background：表格的背景图片
- caption：表格的标题
- tr：表格的行
- td：表格的单元格
- rowspan：跨行
- colspan：跨列
- height：高度
- width：宽度
- th：页眉单元格
- tbody：表格的主体部分
- thead：表头
- tfoot：表尾
<!DOCTYPE html>
<html>
<head>
<title>07表格相关元素</title>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
</head>
<body>
<table background="logo.jpg" border="1" width=400 cellspacing=0 cellpadding=0 align="center" style="text-align: center;">
<colgroup >
<col style="width: 50%;" bgcolor=#0f0>
<col style="width: 50%;">
</colgroup>
<caption><b>上课安排表</b></caption>
<thead></thead>
<th>课程</th>
<th>老师</th>
</thead>
<tbody>
<tr>
<td>Web前置课</td>
<td>HENG</td>
</tr>
<tr>
<td>JavaSE</td>
<td>HENG</td>
</tr>
</tbody>
<tfoot>
<td colspan="2" style="text-align: right;">共计两门课程</td>
</tfoot>
</table>
</body>
</html>
1.1.8 表单相关元素
之前所说的标签元素，都是以展示数据为主，为了增强网页的交互效果，让用户从网页上提交一些数据给服务器，就需要表单相关的元素
- form标签：表单标签，form当中的其他控件当做整体去提交给我们的服务器的。
对于form的属性而言：
- action属性：我们将表单的数据提交到哪里去？一般会去提交到服务器上的一个专门处理数据提交的文件。
- method属性：数据的提交方式，post和get。get提交的数据是明文的，post提交的数据经过封装的。
常见的一些控件
- input：其中有type属性，type属性的不同，则会导致input表现的形式也会不同
- text：文本框
- password：密码框
- radio：单选框
- checkbox：复选框
- submit：提交按钮
- reset：重置按钮
- button：按钮
- image：图像
- file：文件上传
- select
- textarea
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
<title>01表单相关元素</title>
</head>
<body>
<!--定义表单-->
<form action="#" method="get">
单行文本框:<input type="text" placeholder="请输入XXX"><br>
不可编辑的文本框:<input type="text" readonly><br>
密码框：<input type="password"><br>
隐藏文本框：<input type="hidden"><br>
第一组单选框：<br>
<input type="radio" name="wife">迪丽热巴<br>
<input type="radio" name="wife">哈妮克孜<br>
<input type="radio" name="wife">马尔扎哈<br>
第二组单选框：<br>
<input type="radio" name="boyfirend">王一博<br>
<input type="radio" name="boyfirend">朱一龙<br>
<input type="radio" name="boyfirend">吴彦祖<br>
复选框：<br>
<input type="checkbox" name="myboy">王一博<br>
<input type="checkbox" name="myboy">朱一龙<br>
<input type="checkbox" name="myboy">吴彦祖<br>
文件上传：<input type="file"><br>
图像域：<input type="image" src="logo.jpg"><br>
下面是常见的四个按钮：<br>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="submit" value="取消" disabled >
<input type="button" value="按钮">
<button>登录</button>
</form>
</body>
</html>
使用label标签
扩大当前控件的点击空间，当前控件+文字说明
<label for="username">单行文本框:</label>
<input id="username" type="text" placeholder="请输入XXX"><br>
不可编辑的文本框:<input type="text" readonly><br>
<label>密码框：<input type="password"><br></label>
隐藏文本框：<input type="hidden"><br>
第一组单选框：<br>
<label><input type="radio" name="wife">迪丽热巴</label><br>
<label><input type="radio" name="wife">哈妮克孜</label><br>
<label><input type="radio" name="wife">马尔扎哈</label><br>
select标签下拉框
<!--展开+多选-->
<select name="高级编程语言" multiple size="3">
<option>Java</option>
<option>C++</option>
<option>Python</option>
<option>Java</option>
<option>C++</option>
<option>Python</option>
<option>Java</option>
<option>C++</option>
<option>Python</option>
</select>
<br>
<select name="城市选择" >
<optgroup label="西安">
<option value="高新区">高新区</option>
<option value="雁塔区">雁塔区</option>
<option value="碑林区">碑林区</option>
</optgroup>
<optgroup label="咸阳">
<option value="渭城区" selected>渭城区</option>
<option value="秦都区">秦都区</option>
</optgroup>
</select>
textarea标签
用于输入一段文字的
- cols：横向的宽度
- rows：纵向的高度
<textarea cols="50" rows="50">
</textarea>
HTML5新增的一些表单属性
- placeholder：作为文本框的输入提示
- autofocus:自动获取焦点
- required：提交后的检查，必须填写
- list：是将下拉框和文本框进行结合
<form>
请输入书名:<input type="text" list="books"><br>
</form>
<datalist id&
最低0.47元/天 解锁文章
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
