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>