HTML5学习

HTML5简介

• 全称：Hypertext Markup Language，超文本标记语言
• 内容：文字、图片、音频、视频等
• html文档，由标签组成，不区分大小写

常用的浏览器

• Chrome：谷歌，v8引擎
• Firefox：火狐
• IE：微软
• Safiri：苹果

常用的轻量级前端开发软件

• HbuilderX
• vscode
• webstrom

标签

• 单标签：没有结束标签，无需内容，即可表达一定的含义
• 双标签：由开始标签和结束标签组成，中间夹杂文本内容，统称为一个元素Element
• 行内标签：inline，不独占一行，从左向右排列
• 块状标签：block，空间上独占一行，从上向下排列

标题标签

• h1、h2、h3、h4、h5、h6
• 一共有六级标题，但是常用的也就只有前3级

段落标签

• 块状标签
• 用于写入大量的内容，如文本
• 在段落中，制表符(\t)、换行符(\n)、回车符(\r)，都失去了他本来的效果，仅仅表现为一个空格
• 在段落中，想要换行需要使用换行标记(br)

水平线标签

• 块状标签
• 标签名：hr
• 属性
  • size：设置水平线高度
  • color：设置水平线颜色
  • width：设置水平线宽度
  • align：设置水平线水平对齐方式

图像标签

• 行内标签
• 标签名：img
• 属性
  • src：设置图片的路径
  • alt
    • 用于给用户提示，对图片进行描述(网速差时)
    • 用于给网络蜘蛛或爬虫时提示
    • 用于seo，搜索引擎优化
  • width：设置图片的宽度(调整其中一个，另一个会随之改变)
  • height：设置图片的高度(同时调整宽度和高度，会导致图片失真变形)
• 图片格式
  • gif：动图
  • jpg：有损压缩图片，不支持透明
  • png：支持透明

超链接标签

• 行内标签
• 标签名：a
• 属性
  • href：用于指定目标页面
  • target：用于指定跳转方式
    • _self：表示在当前页面进行跳转
    • _blank：表示创建一个新页面，然后跳转

文本格式化标签

• b：加粗文本
• strong：加粗文本
• i：斜体文本
• em：斜体文本
• sub：下标
• sup：上标
• del：删除线
• font：设置文字格式(已废弃)

列表标签

• 块状标签
• 每个li都是一个列表项

1. 无序列表

• 属性：type，设置列表前置符号种类

<ul>
	<li>学习要认真</li>
	<li>学习要努力</li>
	<li>学习要刻苦</li>
	<li>学习要有效</li>
</ul>

2. 有序列表

• 属性：type，设置列表前置符号种类

<p>把大象放进冰箱分几步?</p>
<ol>
	<li>打开冰箱</li>
	<li>把大象放进冰箱</li>
	<li>关上冰箱</li>
</ol>

2. 定义列表

<dl>
	<dt>标题一</dt>
	<dd>内容一</dd>
	<dt>标题二</dt>
	<dd>内容二</dd>
	<dt>标题三</dt>
	<dd>内容三</dd>
</dl>

表格标签

• 标签名
  • table：表格标签
  • thead：表头标签
  • tbody：表格主体标签
  • tfoot：表尾标签
  • tr：表格行标签
  • td：表格单元格标签
• 属性
  • border：设置表格边框粗细
  • cellpadding：设置单元格内元素与单元格内边框之间的距离
  • cellspacing：设置单元格之间的距离
  • width：设置表格的宽度
  • height：设置表格的高度
  • align：设置表格在网页内的水平对齐方式
  • bgcolor：设置表格的背景色
  • colspan：单元格列合并
  • rowspan：单元格行合并

<table border="1" cellspacing="0" cellpadding="10" bgcolor="antiquewhite">
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td>4</td>
		<td>5</td>
		<td>6</td>
	</tr>
	<tr>
		<td>7</td>
		<td>8</td>
		<td>9</td>
	</tr>
</table>

表单标签

• 表单是块状标签，表单元素是行内标签
• 标签名：form
• 属性
  • action：表示提交到的服务器地址
  • method：表示提交的方法，get / post

<form action="" method="post">'
	这里写表单元素
</form>

1. 单行文本框

• 标签名：input
• type="text"：设置为单行文本框
• 其他属性
  • name：设置表单元素的名称
  • size：设置文本框的尺寸
  • maxlength：设置文本框最大长度
  • value：设置文本框默认值
  • placeholder：设置文本框提示信息
  • readonly="readonly"：设置文本框为只读(布尔属性)
  • disabled="disabled"：表示弃用

<input type="text" name="单行文本框" value="夜漠夕" />

2. 密码框

• 标签名：input
• type="password"：设置为密码框
• 其他属性与单行文本框完全一致

<input type="password" name="密码框" />

3. 单选框

• 标签名：input
• type="radio"：设置为单选框
• checked="checked"：表示默认选中
• value：表示向服务器传输值
• 单选按钮的名称要一致才能实现单选
• 其他属性与单行文本框完全一致

<input type="radio" name="单选框" value="1" checked="checked" />男
<input type="radio" name="单选框" value="2" />女

4.复选框

• 标签名：input
• type="checkbox"：设置为复选框
• 其他属性与单行文本框完全一致

<input type="checkbox" name="复选框" value="1" />足球
<input type="checkbox" name="复选框" value="2" />排球
<input type="checkbox" name="复选框" value="3" />网球

5.下拉列表框

• 标签名
  • select：下拉列表框标签
  • option：下拉项标签
• 属性
  • name：设置下拉列表框的名称
  • size：设置下拉列表框同时显示几个选线
  • value：表示向服务器传输值
  • selected="selected"：表示默认选中

<select name="下拉列表框">
	<option value="1">东</option>
	<option value="2">西</option>
	<option value="3">南</option>
	<option value="4">北</option>
</select>

6.文本域

• 标签名：textarea
• 多行文本框，用于输入大量文本
• 由于中英文字符大小有区别，行属性(rows)和列属性(cols)几乎无用，需要通过CSS来设置文本域样式

<textarea placeholder="请输入内容..."></textarea>

7.按钮

• 提交按钮：把表单中的数据提交到服务器中
• 重置按钮：把表单元素中的内容重置为初始状态
• 普通按钮：需要开发者自定义行为

第一种写法：

<input type="submit" value="提交按钮" name="提交按钮" />
<input type="reset" value="重置按钮" name="重置按钮" />
<input type="button" value="普通按钮" name="普通按钮" />

第二种写法：

<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<button type="button">普通按钮</button>

8.其他表单元素

• 兼容性不好，行为不统一，用户体验不好，不建议使用

<input type="date">