HTML基础
前言
这篇帖子主要是学习HTML实用的基本语法和使用方法
了解HTML
结构
HTML用于描述页面的结构
表现
CSS用于控制页面中元素的样式
行为
JavaScript用于响应用户操作
学习工具
浏览器：
火狐、IE、Chrome
编译器：
HBuilder、VSscode、NotePad++(任选一个)
调试工具：
FireBug
图片工具：
Photoshop
学习目录
一、结构
1.1、html文件基本结构
二、HTML常用标签
2.1、标题标签
2.2、图片标签
2.3、注释标签
2.4、段落标签
2.5、换行标签
2.6、超链接标签
2.7、文本标签
2.8、列表标签
2.9、表格标签
三、表单的构成
3.1、表单的构成
3.2、表单的控件
3.3、select下拉列表
3.4、使用textarea创建一个文本域
一、结构
1.1、html文件基本结构
- 以下为vscode自动生成的HTML基础代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>1、html根标签，一个页面中有且只有一个根标签，网页中的内容都应该写在html标签中
2、head头部标签，该标签中的内容，不会在网页中直接显示，而是用于帮助浏览器解析页
3、title是网页中的标题标签，默认显示在浏览器标题栏中
4、body标签用来设置网页主体内容，网页中所有可见的内容，都编写在body标签中
注意：
- 标签直接都应该使用<>括起来
- 开始标签与结束标签有一点不同，结束标签后以</>结束 例如：<body></body>
- 也有少数标签是单独出现的 例如：<br>、<hr>、<img>、<input>等等
5、在这个结构中，可以编写html的注释，注释的内容不会再页面中展示，但是我们可以在源码中查看，习惯性编写注释，可以有效的帮助开发人员工作，但是注释一定要简洁明了
6.属性：可以通过属性来设置标签，如果处理标签中的内容可以在开始标签中添加属性
属性名="属性值"，一个标签中可以同时设置多个属性，属性之间需要使用空格隔开
<h1>这是我的<font color="yellow" size="4">第二个</font>网页</h1>7、meta标签用来设置网页的一些数据，比如网页的字符集、关键字、简介，它是一个自结束标签
二、HTML常用标签
2.1标题标签
在HTML中，一共有六级标题标签 h1~h6
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>在显示效果中h1最大，h6最小
- 使用HTML标签时，关心的是标签的语义，我们使用的标签都是语义化标签
- 一般页面中标题标签只使用h1 h2 h3,h3以后的基本不使用
2.2图片标签
1、img标签也是一个自结束标签
<img src="./images/img1.jpg" alt="太平古城" width="200px" height="200px">2、属性：
src：设置一个外部图片的路径
相对路径：相对路径指相对于当前资源所在目录的位置
- 放在同级目录中
<img src="./images/img1.jpg" alt="太平古城">- 放在上级目录中 可以使用../来返回一级目录,返回几级目录就写几个../
<img src="../../images/im1.jpg" alt="太平古城"/>alt：可以用来设置在图片不能显示时，对图片的描述
搜索引擎可以通过alt属性来识别不同的图片
如果不写alt属性，则搜索引擎不会对img中的图片进行收录
width：可以用来修改图片的宽度,一般使用px作为单位
height ：可以用来修改图片的高度，一般使用px作为单位
注意： 一般开发中除了自适应的页面，不建议设置width和height
3、图片格式
JPEG(JPG)
- JPEG图片支持的颜色比较多，图片可以压缩，但是不支持透明
- 一般使用JPEG来保存照片等颜色丰富的图片
GIF
- GIF支持的颜色少，只支持简单的透明，支持动态图
- 图片颜色单一或者是动态图时可以使用gif
PNG
- PNG支持的颜色多，并且支持复杂的透明
- 可以用来显示颜色复杂的透明的图片
2.3注释标签
- HTML中注释不能嵌套
<!-- 这里是注释 -->2.4段落标签
<p>是一个段落标签，在其直接输入一段文字
<p>我是p标签</p>
- p标签没有缩进
- 在p标签中输入多个空格都会默认为一个空格
- 在p标签中使用换行是换不了的，默认为一个空格，需要换行使用<br>标签进行换行
2.5换行标签
br表示换行，br也是一个自结束标签
<p>我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签
<br/>
我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签
<br/>
我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签
</p>
2.6超链接标签
使用超链接可以让我们从一个页面跳转到另一个页面 使用a标签来创建一个超链接
属性：
href:指向链接跳转的目标地址,可以写一个相对路径也可以写一个完整的地址
<a href="http://www.baidu.com">我是一个超链接</a>2.7文本标签
- em标签em主要表示语气上的强调,em在浏览器中默认使用斜体显示
<p>今天天气真是是<em>好热</em>啊！</p>
- strong标签表示强调的内容，比em更强烈，默认使用粗体显示
<p><strong>如果你不好好读书，就只能去打螺丝</strong></p>
- i标签中的内容会以斜体显示
- b标签中的内容会以加粗显示
<p>
<i>我是i标签中的内容</i>
<b>我是b标签中的内容</b>
</p> 
- small标签中的内容会比他的父元素中的文字要小一些
<p>
我是p标签中的内容<small>我是small标签中的内容</small>
</p> 
- 网页中所有的加书名号的内容都可以使用cite标签，表示参考的内容
<p>
<cite>《人性的弱点》</cite>是最喜欢的一般的书
</p>
- q标签表示一个短的引用（行内引用）
- q标签引用的内容，浏览器会默认加上引号
- blockquote标签表示一个长引用（块级引用）
<p>
子曰:<q>学而时习之不亦说乎！</q>
</p>
<div>
子曰:
<blockquote>
有朋自远方来，不亦君子乎！
</blockquote>
</div>
- 使用del标签来表示一个删除的内容
<p>
<del>我滴个姥姥</del>
</p> 
- ins标签表示一个插入的内容
<p>
我真的<ins>很c的</ins>！
</p>
2.8 列表标签
在HTML中一共有三种列表：
1、无序列表
- 使用ul标签来创建一个无序列表
- 使用li在ul中创建一个一个的列表项
- 一个li就是一个列表项
注意：
ul和li都是块元素
2、有序列表
- 有序列表和无序列表类似，只不过它使用ol来代替ul
- 有序列表使用有序的序号作为项目符号
3、定义列表
- 定义列表用来对一些词汇或内容进行定义
- 使用dl来创建一个定义列表
- dl中有两个子标签
- dt ： 被定义的内容
- dd ： 对定义内容的描述
- 同样dl和ul和ol之间都可以互相嵌套
<h3>无序列表</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<h3>有序列表</h3>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<h3>自定义列表</h3>
<dl>
<dt>前端</dt>
<dd>HTML</dd>
<dd>CSS</dd>
<dd>JavaScript</dd>
<dd>Vue</dd>
</dl>
2.9表格标签
在HTML中，使用table标签来创建一个表格
tr：表示一行
td：表示单元格
th：表示表头中的内容，用法跟td一样，不同的是它会有一些默认效果
rowspan：用来设置纵向的合并单元格
colspan：横向的合并单元格
border-spacing：设置table和td边框之间默认距离
border：表示边框
border-collapse：可以用来设置表格的边框合并
- 如果设置了边框合并，则border-spacing自动失效
<table border="1" width="40%" align="center">
<!--
在table标签中使用tr来表示表格中的一行，有几行就有几个tr
-->
<tr>
<!-- 在tr中需要使用td来创建一个单元格，有几个单元格就有几个td -->
<td>A1</td>
<td>A2</td>
<td>A3</td>
<td>A4</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
<!--
rowspan用来设置纵向的合并单元格
-->
<td rowspan="2">B4</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
</tr>
<tr>
<td>D1</td>
<td>D2</td>
<!--
colspan横向的合并单元格
-->
<td colspan="2">D3</td>
</tr>
</table>
thead：表头
tbody：表格主题
tfoot：表格底部
这三个标签的作用，就来区分表格的不同的部分，他们都是table的子标签，
都需要直接写到table中，tr需要写在这些标签当中
- thead中的内容，永远会显示在表格的头部
- tfoot中的内容，永远都会显示表格的底部
- tbody中的内容，永远都会显示表格的中间
如果表格中没有写tbody，浏览器会自动在表格中添加tbody
并且将所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素
通过table > tr 无法选中行 需要通过tbody > tr
三、表单的构成
3.1表单的构成
作用：用来将用户信息提交给服务器
- from标签创建一个表单，且在标签中必须指定一个action属性，该属性指向一个服务器的地址
当我们提交表单时将会提交到action属性对应的地址
<form action="form_action.asp"></form>- method属性用于设置表单数据的提交方式，取值为get或post
<form action="form_action.asp" method="get"></form>1. Get是不安全的，因为在传输过程，数据被放在请求的URL中；Post的所有操作对用户来说都是不可见的
2. Get传送的数据量较小，这主要是因为受URL长度限制；Post传送的数据量较大，一般被默认为不受限制
3. Get限制Form表单的数据集的值必须为ASCII字符；而Post支持整个ISO10646字符集
4. Get执行效率却比Post方法好，Get是form提交的默认方法
- name属性用于指定表单的名称，将用户填写的内容提交服务器
- autocomplete属性：用于指定表单是否有自动完成功能
- on：表单有自动完成功能
- off：表单无自动完成功能
- autocomplete不仅适用于<from>标签，还适用于<input>标签
<form id="formBox" autocomplete="on"></form>3.2表单的控件
基本语法：
<input type="控件类型">
文本框：
<input type="text">密码框：
<input type="password">单选按钮
<input type="radio" name="gender" checked="checked">男
<input type="radio" name="gender">女
- 在定义单选按钮时，必须为同一组中的选项指定相同的name值，这样子“单选”才会生效
- 还可以对单选按钮应用checked属性，指定默认选项
- 还可以使用label标签用来选中表单中的提示文字，该标签还可以指定一个for属性，该属性的值需要指定一个表单项的id值
<label for="um">用户名</label>
<input id="um" type="text" name="username"/> 多选框
使用input创建一个多选框，它的type属性使用checkbox
爱好 <input type="checkbox" name="hobby" value="zq" />足球
<input type="checkbox" name="hobby" value="lq" />篮球
<input type="checkbox" name="hobby" value="ymq" checked="checked" />羽毛球
<input type="checkbox" name="hobby" value="ppq" checked="checked"/>乒乓球 
普通按钮
<input type="button" value="按钮">提交按钮
<input type="submit" value="提交">重置按钮
<input type="reset" />除了使用input，也可以使用button标签来创建按钮
这种方式和使用input类似，只不过由于它是成对出现的标签使用起来更加的灵活
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>3.3select下拉列表
- 下拉列表的name属性需要指定给select，而value属性需要指定给option
- 可以通过在option中添加selected="selected"来将选项设置为默认选中
- 当为select添加一个multiple="multiple"，则下拉列表变为一个多选的下拉列表
- 在select中可以使用optgroup对选项进行分组
- 同一个optgroup中的选项是一组
- 可以通过label属性来指定分组的名字
- 在下拉列表中使用option标签来创建一个一个列表项
<select name="star">
<optgroup label="女明星">
<option value="fbb">金星</option>
<option value="lxr">刘亦菲</option>
<option value="zw">黄蓉</option>
</optgroup>
<optgroup label="男明星">
<option value="zbs" selected="selected">胡歌</option>
<option value="ldh">彭于晏</option>
<option value="pcj">刘德华</option>
</optgroup>
</select> 
3.4使用textarea创建一个文本域
自我介绍 <textarea name="info"></textarea>
3380
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
