第一节、HTML介绍
html 超文本标签语言，它是一门标签语言，和Java其他的编程语言不同，它完全依靠的是标签来表达含义，所有HTML提供了大量的标签，不通的标签具有不同的作用，学习html 主要任务就是熟悉掌握各种各样的标签。
第二节、运行原理
html 编写的是一个网页比如
第三节、版本介绍
目前主流就是HTML5,往前就是 HTML4.0.1, XHMTL这些版本，目前就是以H5是最主要的，它和其他版本的区别，对于PC端开发HTML4 完全够用，HTML5是以移动端开发为驱动而产生的。一方面提供了比H4更多的标签。二提供了更多的JS操作网页能力。
第一个程序
<!DOCTYPE html> 主权声明，告诉浏览器我是要给HTML5的代码
<html lang="en"> 网页整体
<head> 网页头部
<meta charset="UTF-8"> 告诉浏览器用何种编码来解析。
<title>Title</title> 告诉浏览器网页标题
</head>
<body> 网页主体
code here...... 这这里写自己的代码
</body>
</html>
第四节、HTML 语法
1标签语法
任何内容的出现都是使用标签来包裹的，不同的标签有不同作用
<a> 我是一个web菜鸡 </a>
- 开始标签
- 结束标签
- 通常是成对出现，偶尔也有单标签( 没有介素标签 hr br img )
- 介于开始和结束间的东西称为标签内容。
2属性语法
<a href="http://www.bilibili.com" target="_blank" > 我是一个web菜鸡 </a>
- 写在开始标签中，属性通过 key=value 方式编写
- 不同的标签拥有不同的属性，靠记。
3嵌套语法
多个或多种标签可以相互包含，一个标签的内容又是其他标签。
<div>
hello
<span>world</span>
</div>
这里 div 嵌套的 span 标签。
第五节、HTML 常用标签
html5全部标签https://www.runoob.com/html/html5-intro.html自学参考。https://www.w3cschool.cn/html/
标题
<!--标题 h1-h6 -->
<h1>刘士祺是Web菜鸡</h1>
<h2>刘士祺是Web菜鸡</h2>
<h3>刘士祺是Web菜鸡</h3>
<h4>刘士祺是Web菜鸡</h4>
<h5>刘士祺是Web菜鸡</h5>
<h6>刘士祺是Web菜鸡</h6>
h1-h6 随着数字越大 字体就越小。显示标题
段落
<p>刘士祺学习Web前端非常的认真，结果写不来网页，他说一听就会，一写就废，梁老师安慰他说没事，你就是个菜鸡，没关系,刘士祺学习Web前端非常的认真，
结果写不来网页，他说一听就会，一写就废，梁老师安慰他说没事，你就是个菜鸡，没关系刘士祺学习Web前端非常的认真，结果写不来网页，他说一听就会，一写就废，梁老师安慰他说没事，
你就是个菜鸡，没关系</p>
每个段落会自动换行。显示一段段落
文本控制
<p>刘士祺学习Web前端非常的认真，结果写不来网页，他说一听就会，一写就
<font color="red">废</font> ，梁老师安慰他说没事，你就是个菜鸡，没关系,刘士祺学习Web前端非常的认真，
结果写不来网页，他说一听就会，一写就废，梁老师安慰他说没事，
你就是个<font color="#8a2be2" size="40">菜鸡</font>，没关系刘士祺学习Web前端非常的认真，结果写不来网页，他说一听就会，一写就废，梁老师安慰他说没事，
你就是个<font color="red" size="30" face="楷体">菜鸡</font>，没关系</p>
<p>IPhone12Pro Max
<del><font color="gray"><em>价格:1998.00</em></font></del>
<font color="red"><strong>现价:9.8包邮</strong></font>
</p>
font 控制 字体颜色 大小 样式
del 删除线
strong 加粗
em 倾斜
水平线
<hr color="red" size="1" width="300" align="center">
color 颜色
size： 粗细
width: 宽度
align: 对齐 left | center | right
换行
<span> hello <br>
world </span>
网页中元素是否换行不是由代码排列决定的，而是有元素的性格决定的。
图片
<img src="image/jt.jpg" width="200" height="300" alt="景甜" >
src 图片位置，相对路径
width 宽度
height 高度
alt 图片加载失败的提示信息
超链接
<a href="http://www.bilibili.com" target="_blank" >我是一个连接</a>
href ： 调整页面地址
target： 控制页面打开方式 _slef(默认，覆盖当前页面） _blank(新开一个页面)
列表
无序列表
<ul type="circle">
<li>景甜</li>
<li>杨幂</li>
<li>杨颖</li>
<li>白百何</li>
</ul>
有序列表
<ol type="a">
<li>景甜 <img align="middle" src="images/jt.jpg" width="60" height="60"></li>
<li>杨幂 <img align="middle" src="images/jt.jpg" width="60" height="60"></li>
<li>杨颖 <img align="middle" src="images/jt.jpg" width="60" height="60"></li>
<li>白百何 <img align="middle" src="images/jt.jpg" width="60" height="60"></li>
<li>马蓉 <img align="middle" src="images/jt.jpg" width="60" height="60"></li>
</ol>
表格
<table width="1000" height="600" border="1" cellspacing="0" cellpadding="10">
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td align="center" valign="middle" bgcolor="red" >血型</td>
<td>身高(cm)</td>
<td>收入(亿)</td>
</tr>
<tr bgcolor="orange">
<td>陈奕迅</td>
<td>男</td>
<td>40</td>
<td>O</td>
<td>177</td>
<td>1.5</td>
</tr>
<tr>
<td>陈奕迅</td>
<td>男</td>
<td>40</td>
<td>O</td>
<td>177</td>
<td>1.5</td>
</tr>
<tr>
<td>陈奕迅</td>
<td>男</td>
<td>40</td>
<td>O</td>
<td>177</td>
<td>1.5</td>
</tr>
<tr>
<td>陈奕迅</td>
<td>男</td>
<td>40</td>
<td>O</td>
<td>177</td>
<td>1.5</td>
</tr>
</table>
table[表格] > tr[行] -> td[列]
-
table
width="1000" 宽 <br /> height="600" 高<br /> border="1" 边框显示 0 不显示<br /> cellspacing="0" 单元格间距<br /> cellpadding="10" 单元格内边距。 -
td
algin: 水平 left | center | right<br /> valgin: 垂直 top | middle | bottom<br /> bgcolor：背景色<br /> colspan ： 合并列<br /> rowspan： 合并行<br />
文本
<span>我是测试文字1</span><span>我是测试文字2</span>
span 是典型的行内元素，就是他不会主动换行，除非一行已经占满。
块
<div>
我是div 1
</div>
<div>
我是div 2
</div>
div 是典型的块元素，就是它会主动换行,哪怕一行并未占满。
表单
表单就是用于用户填写或者选择的标签，用于收集用户数据。比如你要登录，填写账号密码，比如你要报账，填写报销信息的表单。
<!--form表单容器，里面放多个具体的表单标签-->
<form action="服务端接受地址" method="get" enctype="application/x-www-form-urlencoded" >
<input name="username" type="text" placeholder="输入账号/手机号" >
<input name="pwd" type="password" placeholder="输入秘密" >
<hr>
<input id="a" name="xx" type="radio" value="man" > <label for="a" >男</label>
<input id="b" name="xx" type="radio" value="woman" > <label for="b">女</label>
<hr/>
<input id="c" name="hobby" type="checkbox" value="game"> <label for="c">游戏</label>
<input id="d" name="hobby" type="checkbox" value="live"><label for="d">直播</label>
<input id="e" name="hobby" type="checkbox" value="wash"><label for="e">洗浴</label>
<input id="f" name="hobby" type="checkbox" value="ball"><label for="f">球</label>
<select name="city">
<optgroup label="西南地区">
<option value="CQ">重庆</option>
<option value="GZ">贵州</option>
<option value="YL">云南</option>
</optgroup>
<optgroup label="东北地区">
<option value="HLJ">黑龙江</option>
<option value="LN">辽宁</option>
<option value="JL">吉林</option>
</optgroup>
</select>
<hr>
<textarea name="info" cols="100" rows="10" placeholder="请填写信息" ></textarea>
<hr>
<!-- <button>提交</button>-->
<input type="submit" value="注册">
<input type="reset" value="重置">
</form>
状态: 对应radio checkbox 默认选中 在需要选中的标签添加 checked属性；
对于 select 默认选中 在需要选中的标签总添加 **selected **属性。
其他: disable 表示禁用，禁用后不可操作，更不会发送数据个后台
readonly 表示只读， 不可修改。 但是数据会发送给后台。
效果
====表单练习=
页面框架
<!--页面框架-->
<a href="2_语法.html" target="show">首页</a>
<a href="https://www.bilibili.com" target="show">公司介绍</a>
<a>产品</a>
<a>招聘</a>
<a>联系我们</a>
<hr>
<iframe name="show" width="1000" height="500" src="">
</iframe>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
