html学习---sp
web标准的构成
主要包括结构（Structure)，表现（Presentation)和行为（Behavior)三个方面。
| 标准 | 说明 |
|---|---|
| 结构 | 结构用于对网页元素进行整理和分类，html |
| 表现 | 表现用于设计网页元素的版式，颜色，大小等外观样式，CSS |
| 行为 | 行为是指网页模型的定义及交互的编写，Javascript |
Web标准提出的最佳体验方案：结构，样式，行为相分离。
什么是html?
html是指超文本标记语言（Hyper Text Markup Language),它是用来描述网页的一种语言。
html不是一种编程语言，而是一种标记语言。
标记语言是一套标记标签。
html基本结构标签（骨架标签）
| 标签名 | 定义及说明 |
|---|---|
| html | html标签，根标签 |
| head | 文档的头部，必须设置title标签 |
| title | 文档的标题，让页面拥有一个属于自己的网页标题 |
| body | 文档的主体 |
网页开发工具
VSCode工具生成骨架标签新增代码
1.<iDOCTYPE>标签
文档类型声明，作用就是告诉浏览器使用哪种html版本来显示网页。
注意：该声明位于文档中的最前面的位置，处于<html>标签之前；该标签非html标签，是文档类型声明标签。
<iDOCTYPE html>
2.lang语言
用来定义当前文档显示的语言
1.en—英语
2.zh-CN—中文
定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文。
3.charset字符集
在<head>标签内，可以通过<meta>标签的charset属性来规定html文档应该使用哪种字符编码。
<meta charset=“UTF-8”/>
html常用标签
标题标签
<h1>~<h6>
大~~~~小
标题一共六级选，文字加粗一行显。
由大到小依此减，由重到轻随之变。
段落标签！
<p>我是一个段落标签</p>
特点：
1.文本在一个段落中会根据浏览器窗口的大小自动换行。
2.段落与段落之间保有空隙。
换行标签！
<br />
特点：是单标签。
文本格式化标签
| 语义 | 标签 |
|---|---|
| 加粗 | <strong></strong>或者<b></b> |
| 倾斜 | <em></em>或者<i></i> |
| 删除线 | <del></del>或者<s></s> |
| 下划线 | <ins></ins>或者<u></u> |
<div>和 <span>标签
div（division),分割分区，一行只能放一个；
span,跨度跨区，一行可以放多个。
<div> 一个</div>
<span>多个</span>
图像标签和路径！
| 属性 | 属性值 |
|---|---|
| scr | 图片路径 |
| alt | 文本 |
| title | 文本 |
| width | 像素 |
| height | 像素 |
| border | 像素 |
图片: 
图像标签属性注意点：
①图像标签可以拥有多个属性，必须写在标签名的后面。
② 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
③属性采取键值对的格式，即key=“value”的格式，属性=“属性值”。
路径：
1.相对路径
如：
同级：<img= scr=“baidu.gif”/>
下一级：<img= scr=“image/baidu.gif”/>
上一级：<img= scr=“…/baidu.gif”/>
2.绝对路径
如：
“D:\web\img\logo.gif"或者"http://www.itcast.cn/images/logo.gif”
超链接标签！
<a href="跳转目标“ target="目标窗口的弹出方式”>文本或图像</a>
a为anchor的缩写
_self为默认值在本窗口打开，
_blank为在新窗口打开。
链接分类
注释和特殊字符
<!-- 注释语句 -->
特殊字符：
空格，大于，小于最重要
表格标签
<table>
<thead>
<tr>
<th>表头</th>
…
</tr>
</thead>
<tbody>
<tr>
<td>文字</td>
…
</tr>
…
</tbody>
</table>
表格属性
合并单元格：
- 跨行合并:rowspan="合并单元格的个数“
- 跨列合并:colspan="合并单元格的个数“
列表标签
无序列表！
<ul>
<li>列表项1</li>
<li>列表项2</li>
…
</ul>
有序列表
<ol>
<li>列表项1</li>
<li>列表项2</li>
…
</ol>
自定义列表！
<dl>
<dt>列表项1</dt>
<dd>列表项2</dd>
<dd>列表项3</dd>
…
</dl>
表单标签
通常由表单域，表单控件（表单元素），提示信息三部分构成。
表单域
<form action="url地址“ method="提交方式(get/post）” name="表单域名称“>
各种表单元素控件
</form>
表单控件（表单元素）
input输入表单元素
type属性的属性值及其描述如下：
<input type="属性值” />
下面展示一些相关代码。
<form action ="xxx.php" method="get">
<!--text 文本框 用户可以在里面输入任何位置-->
用户名：<input type="text" name="username" value="请输入用户名“ maxlength="6"> <br>
<!--password 密码框 用户看不见输入的密码-->
密码：<input type="password" name="pwd"> <br>
<!--radio 单选按钮 可以实现多选一-->
<!--name 是表单元素名字 这里性别单选按钮必须有相同的name才可以实现多选一-->
<!--单选按钮和复选框可以设置checked属性，默认选中-->
性别：男 <input type="radio" name="sex" value="男”> 女 <input type="radio" name="sex" value="女"> <br>
<!--checkbox 复选框 可以实现多选-->
爱好：吃饭 <input type="checkbox" name="hobby" value="吃饭"> 睡觉 <input type="checkbox" name="hobby" value="睡觉" check="checked"> <br>
<!--点击了提交按钮，可以把表单域form里面的表单元素里面的值提交给后台服务器-->
<input type="submit" value="免费注册">
<!--重置按钮可以还原到初始状态-->
<input type="reset" value="重新填写">
<!--普通按钮button后期结合js使用-->
<input type="button" value="获取短信验证码"> <br>
<!--文件域 使用场景 上传文件使用-->
<input type="file">
</form>
除type外其他常用属性：
label标签
该标签为input元素定义标注(标签)。
该标签用于绑定一个表单元素当点击
for属性应当与相关元素的id属性相同
select下拉表单元素
<select>
<option>列表项1</option>
<option select=“selected”>列表项2(默认选项）</option>
<option>列表项3</option>
…
</select>
textarea文本域元素
<textarea rows=“显示的行数” cols=“每行中的字符数”>
文本内容
</textarea>
实际开发中不会使用，都是用css
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
