HTML学习
1、开头结构
<!doctype html>!:声明，意思是下面的文档标签将以html5规范去解析
<html>
<!-- //头部，主要用来完成一个网页的相关设置 -->
<head>
<meta charset="utf-8"><!-- 汉子编码 ,meta是元,的意思,主要用来完成对应设置-->
<meta name="keywords"content="">
<meta name="description"content=""><!-- 网站的描述内容 ,,,这里做seo优化很有用-->
<title>我的第一个网页</title><!-- 标题的意思 -->
<!-- 设置一个图标 -->
<link rel="shortcut icon" type="image/x-icon" href="https://www.jd.com/favicon.ico">
<style>
/* 这里书写样式,更加美观 */
</style>
<<link rel="stylesheet" href="style.css"><!-- link:css快捷，用来引入外部样式文件 -->
</head>
<body><!-- 主体部分 -->
<p>这是一个段落</p>
</body>
<script>这里方脚本代码</script>
</html>
2、基本标签
<!-- 按！+tab或者html：5+tab会自动生成文档结构 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 1.div:用来布局的,没有具体含义 -->
<div>
abc
<div>abc</div>
</div>
<!-- 2.hx:标题的意思，1-6级1最大6最小 -->
<h1>前端课程内容，一级</h1>
<h6>6级标题</h6>
<!-- 3.p:表示段落，相当于回车键 -->
<p>大富豪拨号失<br/>败很粗事故车大V速度</p>
<p>大富豪拨号失败很故车大速度</p>
<p>大富豪拨故车大V速度</p>
<!-- 4.br：换行符，单标签 -->
<!-- 5.hr：生成一条水平线，装饰作用 ，单标签-->
<hr/>
<hr width="80%" align="center" color="red" hight="2px">
<!-- 6.a:用来设置超级链接，链接跳转 -->
<a href="http://baidu.com" title="百度">百度</a>
<a href="new_file1.html" target="_blank">文档结构</a>
<a href="new_file1.html" target="_self">文档结构</a>
<!-- 7.img:用来加载外部图片，src：用来设定加载的图片或者图像的路径 ，alt：图片加载不成功时，
显示的提示文字，title：鼠标放在图片上的提示-->
<img src="https://gua8.qhimg.com/dmfd/110_110_75/t019c80f8bd5f6bbdfc.webp">
<img src="https://gua8.qhimg1.com/dmfd/110_110_75/t019c80f8bd5f6bbdfc.webp" alt="商品">
<!-- 8.span：作用于div一样，都是用来布局的，div单独占一行，spanbuhui -->
<div>div1</div>
<div>div2</div>
<span>span1</span>
<span>span2</span><!-- span用于行内布局 -->
<!-- 9.ul/ol:列表，前者是无线列表，后者是有序列表，他们的列表内容都用的是li标签 -->
<ul><!-- ul>li{li$}*3 -->
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
<ol><!-- ol>li{li$}*3 -->
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ol>
</body>
</html>
3、标签属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 标签属性：
1.通常由标签属性=属性值组成
2.起附加信息的作用
3.不是所有的标签都有属性-->
<p title="段落" class="content" id="content">这是一个测试段落</p>
</body>
</html>
4、文本格式化标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 文本格式化标签：通过标签来美化文本外观 -->
<!-- 1.b和strong：都有加粗作用和强调作用，不会自动换行，强调用于SEO时提取关键字 -->
<b>加粗</b>
<strong>加粗且强调</strong>
<!-- 2.i和em：是文字倾斜，em具有强调作用，不会换行，简单倾斜用i，比如添加图标 -->
<i>文字倾斜</i>
<em>文字倾斜且强调</em>
<!-- 3.pre:预格式化文本，保留换行和空格及宽度，文字字号会小一号 -->
<pre>预格式化文本，保留
哈哈哈哈</a></pre>
<!-- 4.small和big：使文字缩小一号和放大一号，big在html5中淘汰了
浏览器支持最小的字是12px字-->
<small>我是小一号的文字</small>
<big>我是大一号的文字</big>
<!-- 5.sub和sup：设置文本为下标和上标 -->
<p>X<sub>1</sub>+X<sub>2</sub></p>
<p>Y<sup>1</sup>+Y<sup>2</sup></p>
</body>
</html>
5、html实体转义
6、命名规范
7、标签通用属性，自定义属性，表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标签通用属性</title>
</head>
<body>
<!-- id：标签标识名 -->
<p id="p1">段落1</p>
<p id="p2">段落2</p>
<!-- class：标签类名 -->
<div class="test">div</div>
<p class="test">p</p>
<!-- style:用来设置当前标签的样式 -->
<p style="color:red;width:200px;border:1px solid #00f;">这是一次测试</p>
<!-- title：给当前标签一个提示文本 -->
<p title="你好">how are you?</p>
<!-- 自定义属性格式：deta-*
作用：用来传值或用于图片懒加载
-->
<!-- 表格格式： table>tr*3>td{内容$}*3 -->
<table border="1" width="400" cellpadding="10" cellspacing="0" align="center">
<tr>
<th>内容1</th><!-- th:表头 -->
<th>内容2</th>
<th>内容3</th>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
</tr>
</table>
<!-- table属性 ：
border：表格边框，默认像素
width:表格宽度，默认单位是像素
align：表格对其方式（left默认、center、right）
cellpadding：单元表格文本与边框的距离
cellspacing：单元格边框间距
rowspan：跨行
colspan：跨列
Emmet语法：table[border=1 width=500 aliign=center]>tr*3>td{内容区$}*3
-->
<table border="1" width="500" aliign="center">
<tr>
<td rowspan="2" align="center">内容区1</td>
<td>内容区2</td>
<td>内容区3</td>
</tr>
<tr>
<td>内容区2</td>
<td>内容区3</td>
</tr>
<tr>
<td>内容区1</td>
<td>内容区2</td>
<td>内容区3</td>
</tr>
</table>
<!-- 完整表格组成：caption标题、thead表头、tbody表体、tfoot表尾
按住AIT键，然后选中位置，可以同时多位置写代码-->
<table border="1" width="600" align="center">
<caption>学生信息表</caption>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
</table>
</body>
</html>
8、form表单标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 用实现前后端交互的重要标签
name：表单名称
action：表单提交的地方
method：前端提交数据到后端的方法（get、post，默认get） -->
<form name="submit" action="test.php" method="post">
<input type="submit">
<input type="text" name="userName" placeholder="请输入您的姓名">
</form>
表单元素：
input类：输入类，用来输入，或者发出指令
textarea类
select类
button类
</body>
</html>
9、iform框架
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的网站</title>
</head>
<body>
<!-- iframe：框架集，用来将多个网页组合成一个文件 -->
<!-- bannner部分 -->
<iframe src="iforme/banner.html" scrolling="no" width="100%" frameborder="0"></iframe>
<!-- 导航部分 -->
<iframe src="iforme/nav.html" scrolling="auto" width="20%" height="300px" frameborder="0"></iframe>
<!-- 核心内容部分 -->
<iframe src="iforme/content.html" scrolling="no" width="70%" frameborder="0"></iframe>
</body>
</html>