1
</head>
<body>
<!--优先级:行内样式>内部样式>外部样式-->
<!--优先级:就近原则,谁离元素近采用谁 -->
<!--行内样式:在标签元素中,编写一个style属性,编写样式即可-->
<h1 style="color: red;">我是标签</h1>
</body>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--内部样式表-->
<style type="text/css">
h1{
color: yellow;
}
</style>
<!--外部样式-->
<link rel="stylesheet" type="text/css" href="CSS3笔记.css"/>
</head>
<body>
<!--优先级:行内样式>内部样式>外部样式-->
<!--优先级:就近原则,谁离元素近采用谁 -->
<!--行内样式:在标签元素中,编写一个style属性,编写样式即可-->
<h1 style="color: red;">我是标签</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--内部样式表-->
<style type="text/css">
h1{
color: yellow;
}
</style>
<!--外部样式-->
<link rel="stylesheet" type="text/css" href="CSS3笔记.css"/>
</head>
<body>
<!--优先级:行内样式>内部样式>外部样式-->
<!--优先级:就近原则,谁离元素近采用谁 -->
<!--行内样式:在标签元素中,编写一个style属性,编写样式即可-->
<h1 style="color: red;">我是标签</h1>
</body>
</html>```
```html
<html>
<head>
<meta charset="utf-8" />
<title>总结</title>
</head>
<body>
<a name="top">顶部</a>
<hr />
<!--标题标签-->
<p>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</p>
<!--字体样式标签-->
<hr />
<!--粗体-->
<strong>我是一头猪</strong>
<br />
<!--斜体-->
<em>我是一头猪</em>
<hr />
<!--特殊符号-->
©
>
<
<hr />
<!--图像标签-->
<img src="存储位置" alt="这是图片不显示的时候显示的图片" title="这是鼠标移到图片上显示的内容" width="这里是图片的宽度" height="图像的高度"; />
<img src="../../XXX.png" />相对位置
<img src="具体的存储位置。" />
<hr />
<!--链接标签-->
<a href="path" target="跳转目标显示窗口"></a>
<!--path为跳转链接的位置-->
<a href="path" target="_self"></a>
<!--_self为在本页面打开-->
<a href="path" target="_blank"></a>
<!--_blank为在新的页面跳转-->
<a href="index.html" target="_blank" target="_self">点击我跳转到新的页面</a>
<a href="path">
<img src="path" alt="这是文字" title="悬停文字" width="宽度" height="高度"/>
</a>
<hr />
<!--锚链接
1.设置跳转位置;
2.跳转;
-->
<a href="#top">点击这里跳转</a>
<hr />
<!--功能性链接-->
<!--邮件链接-->
<a href="mailto:2697951180@qq.com" target="2697951180@qq.com">此邮件联系我</a>
<hr />
<!--列表标签-->
<!--有序列表-->
<ol>这是有序列表的第一行</ol>
<ol>这是有序列表的第二行</ol>
<ol>这是有序列表的第三行</ol>
<!--无序列表-->
<hr />
<ul>
<li>这是无序列表的第一行</li>
<li>这是无序列表的第二行</li>
<li>这是无序列表的第三行</li>
</ul>
<hr />
<!--自定义列表-->
<dl>
<dt>标签</dt>
<dd>列表内容</dd>
<dd>列表内容</dd>
<dd>列表内容</dd>
</dl>
<hr />|
<!--表格标签-->
<!--colspan跨列显示-->
<!--rowspan跨行显示-->
<table border="3px" bgcolor="aqua" width="300">
<tr>
<td colspan="2">1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
</table>
<hr />
<br />
<!--影音标签-->
<!--影视-->
<video src="path" controls="controls" autoplay="autoplay"></video>
<hr />
<!--音乐-->
<audio src="path" controls="controls" autoplay="autoplay"></audio>
<hr />
<!--网页结构-->
<header>头部区域内容</header>
<footer>标记脚步区域</footer>
<section>Web页面中的独立区域</section>
<article>独立的文章内容</article>
<aside>相关内容(常用于侧边栏)</aside>
<nav>导航类辅助内容</nav>
<hr />
<!--内联框架-->
<iframe src="index.html#top" name="hello!" width="400px" height="300px"></iframe>
<a href="index.html" target="hello">XX</a>
<hr />
<!--表单语法-->
<form action="index.html" method="post"></form>
<form action="index.html" method="get"></form>
<hr />
<p>名字:
<input type="text" name="username" id="username" value="" />
</p>
<hr />
<p>密码:
<input type="text" name="passname" id="lalal" value="" />
<br />
<hr />
<!--提交-->
<input type="submit" />
<!--重置-->
<input type="reset" />
<br />
<hr />
<!--单选框-->
<input type="radio" name="sex"/>男
<input type="radio" name="sex"/>女
<br />
<hr />
<!--多选框-->
<input type="checkbox" />上海
<br />
<input type="checkbox" />北京
<br />
<input type="checkbox" />南京
<br />
<input type="button"/>提交
<br />
<hr />
<!--下拉框-->
<select name="列表名称">
<option value="选择的值">中国</option>
<option value="选择的值">日本</option>
<option value="选择的值" selected="默认值">韩国</option>
<hr />
</select>
<hr />
<!--文本框-->
<p>
<textarea name="textarea" rows="30" cols="50"></textarea>
</p>
<hr />
<!--打开文件-->
<p>
<input type="file" />
</p>
<hr />
<br />
<!--邮箱验证-->
<input type="email" required="required" />输入邮箱
<br />
<hr />
<!--url验证-->
<input type="url" />输入URL
<br />
<hr />
<!--数字验证-->
<input type="number" />数字验证
<br />
<hr />
滑块
<input type="range" />滑块
<br />
<hr />
<!--搜索框-->
<input type="search" placeholder="请输入搜索内容 " />搜索框
<br />
</p>
</body>
</html>```
```html
<html>
<head>
<meta charset="utf-8" />
<title>总结</title>
</head>
<body>
<a name="top">顶部</a>
<hr />
<!--标题标签-->
<p>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</p>
<!--字体样式标签-->
<hr />
<!--粗体-->
<strong>我是一头猪</strong>
<br />
<!--斜体-->
<em>我是一头猪</em>
<hr />
<!--特殊符号-->
©
>
<
<hr />
<!--图像标签-->
<img src="存储位置" alt="这是图片不显示的时候显示的图片" title="这是鼠标移到图片上显示的内容" width="这里是图片的宽度" height="图像的高度"; />
<img src="../../XXX.png" />相对位置
<img src="具体的存储位置。" />
<hr />
<!--链接标签-->
<a href="path" target="跳转目标显示窗口"></a>
<!--path为跳转链接的位置-->
<a href="path" target="_self"></a>
<!--_self为在本页面打开-->
<a href="path" target="_blank"></a>
<!--_blank为在新的页面跳转-->
<a href="index.html" target="_blank" target="_self">点击我跳转到新的页面</a>
<a href="path">
<img src="path" alt="这是文字" title="悬停文字" width="宽度" height="高度"/>
</a>
<hr />
<!--锚链接
1.设置跳转位置;
2.跳转;
-->
<a href="#top">点击这里跳转</a>
<hr />
<!--功能性链接-->
<!--邮件链接-->
<a href="mailto:2697951180@qq.com" target="2697951180@qq.com">此邮件联系我</a>
<hr />
<!--列表标签-->
<!--有序列表-->
<ol>这是有序列表的第一行</ol>
<ol>这是有序列表的第二行</ol>
<ol>这是有序列表的第三行</ol>
<!--无序列表-->
<hr />
<ul>
<li>这是无序列表的第一行</li>
<li>这是无序列表的第二行</li>
<li>这是无序列表的第三行</li>
</ul>
<hr />
<!--自定义列表-->
<dl>
<dt>标签</dt>
<dd>列表内容</dd>
<dd>列表内容</dd>
<dd>列表内容</dd>
</dl>
<hr />|
<!--表格标签-->
<!--colspan跨列显示-->
<!--rowspan跨行显示-->
<table border="3px" bgcolor="aqua" width="300">
<tr>
<td colspan="2">1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
</table>
<hr />
<br />
<!--影音标签-->
<!--影视-->
<video src="path" controls="controls" autoplay="autoplay"></video>
<hr />
<!--音乐-->
<audio src="path" controls="controls" autoplay="autoplay"></audio>
<hr />
<!--网页结构-->
<header>头部区域内容</header>
<footer>标记脚步区域</footer>
<section>Web页面中的独立区域</section>
<article>独立的文章内容</article>
<aside>相关内容(常用于侧边栏)</aside>
<nav>导航类辅助内容</nav>
<hr />```
```<html>
<head>
<meta charset="utf-8" />
<title>总结</title>
</head>
<body>
<a name="top">顶部</a>
<hr />
<!--标题标签-->
<p>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</p>
<!--字体样式标签-->
<hr />
<!--粗体-->
<strong>我是一头猪</strong>
<br />
<!--斜体-->
<em>我是一头猪</em>
<hr />
<!--特殊符号-->
©
>
<
<hr />
<!--图像标签-->
<img src="存储位置" alt="这是图片不显示的时候显示的图片" title="这是鼠标移到图片上显示的内容" width="这里是图片的宽度" height="图像的高度"; />
<img src="../../XXX.png" />相对位置
<img src="具体的存储位置。" />
<hr />
<!--链接标签-->
<a href="path" target="跳转目标显示窗口"></a>
<!--path为跳转链接的位置-->
<a href="path" target="_self"></a>
<!--_self为在本页面打开-->
<a href="path" target="_blank"></a>
<!--_blank为在新的页面跳转-->
<a href="index.html" target="_blank" target="_self">点击我跳转到新的页面</a>
<a href="path">
<img src="path" alt="这是文字" title="悬停文字" width="宽度" height="高度"/>
</a>
<hr />
<!--锚链接
1.设置跳转位置;
2.跳转;
-->
<a href="#top">点击这里跳转</a>
<hr />
<!--功能性链接-->
<!--邮件链接-->
<a href="mailto:2697951180@qq.com" target="2697951180@qq.com">此邮件联系我</a>
<hr />
<!--列表标签-->
<!--有序列表-->
<ol>这是有序列表的第一行</ol>
<ol>这是有序列表的第二行</ol>
<ol>这是有序列表的第三行</ol>
<!--无序列表-->
<hr />
<ul>
<li>这是无序列表的第一行</li>
<li>这是无序列表的第二行</li>
<li>这是无序列表的第三行</li>
</ul>
<hr />
<!--自定义列表-->
<dl>
<dt>标签</dt>
<dd>列表内容</dd>
<dd>列表内容</dd>
<dd>列表内容</dd>
</dl>
<hr />|
<!--表格标签-->
<!--colspan跨列显示-->
<!--rowspan跨行显示-->
<table border="3px" bgcolor="aqua" width="300">
<tr>
<td colspan="2">1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
</table>
<hr />
<br />
<!--影音标签-->
<!--影视-->
<video src="path" controls="controls" autoplay="autoplay"></video>
<hr />
<!--音乐-->
<audio src="path" controls="controls" autoplay="autoplay"></audio>
<hr />
<!--网页结构-->
<header>头部区域内容</header>
<footer>标记脚步区域</footer>
<section>Web页面中的独立区域</section>
<article>独立的文章内容</article>
<aside>相关内容(常用于侧边栏)</aside>
<nav>导航类辅助内容</nav>
<hr />```
```html
<html>
<head>
<meta charset="utf-8" />
<title>总结</title>
</head>
<body>
<a name="top">顶部</a>
<hr />
<!--标题标签-->
<p>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</p>
<!--字体样式标签-->
<hr />
<!--粗体-->
<strong>我是一头猪</strong>
<br />
<!--斜体-->
<em>我是一头猪</em>
<hr />
<!--特殊符号-->
©
>
<
<hr />
<!--图像标签-->
<img src="存储位置" alt="这是图片不显示的时候显示的图片" title="这是鼠标移到图片上显示的内容" width="这里是图片的宽度" height="图像的高度"; />
<img src="../../XXX.png" />相对位置
<img src="具体的存储位置。" />
<hr />
<!--链接标签-->
<a href="path" target="跳转目标显示窗口"></a>
<!--path为跳转链接的位置-->
<a href="path" target="_self"></a>
<!--_self为在本页面打开-->
<a href="path" target="_blank"></a>
<!--_blank为在新的页面跳转-->
<a href="index.html" target="_blank" target="_self">点击我跳转到新的页面</a>
<a href="path">
<img src="path" alt="这是文字" title="悬停文字" width="宽度" height="高度"/>
</a>
<hr />
<!--锚链接
1.设置跳转位置;
2.跳转;
-->
<a href="#top">点击这里跳转</a>
<hr />
<!--功能性链接-->
<!--邮件链接-->
<a href="mailto:2697951180@qq.com" target="2697951180@qq.com">此邮件联系我</a>
<hr />
<!--列表标签-->
<!--有序列表-->
<ol>这是有序列表的第一行</ol>
<ol>这是有序列表的第二行</ol>
<ol>这是有序列表的第三行</ol>
<!--无序列表-->
<hr />
<ul>
<li>这是无序列表的第一行</li>
<li>这是无序列表的第二行</li>
<li>这是无序列表的第三行</li>
</ul>
<hr />
<!--自定义列表-->
<dl>
<dt>标签</dt>
<dd>列表内容</dd>
<dd>列表内容</dd>
<dd>列表内容</dd>
</dl>
<hr />|
<!--表格标签-->
<!--colspan跨列显示-->
<!--rowspan跨行显示-->
<table border="3px" bgcolor="aqua" width="300">
<tr>
<td colspan="2">1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
</table>
<hr />
<br />
<!--影音标签-->
<!--影视-->
<video src="path" controls="controls" autoplay="autoplay"></video>
<hr />
<!--音乐-->
<audio src="path" controls="controls" autoplay="autoplay"></audio>
<hr />
<!--网页结构-->
<header>头部区域内容</header>
<footer>标记脚步区域</footer>
<section>Web页面中的独立区域</section>
<article>独立的文章内容</article>
<aside>相关内容(常用于侧边栏)</aside>
<nav>导航类辅助内容</nav>
<hr />