html快速入门

1.什么是html

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。

2.html的标签

2.1 关于文章类的标签

<p>标签：段落标签

<h1>标签：标题标签，可选值h1~h6，h1最大

<br />换行标签

2.2 文本格式化标签

<strong>或<b>标签：加粗标签

<em>或<i>标签：倾斜标签

<del>或<s>标签：删除线标签

<ins>或<u>标签：下划线标签

2.3 div和span标签

<div>和<span>是没有语义的，他们就是一个盒子，用来装内容的

<div>标签用来布局，但是现在一行只能放一个<div>

<span>标签用来布局，一行上可以多个<span>

2.4 图像标签

1）图像标签

在html标签中，<img>标签用于定义html页面中的图像

<img src="图像URL" alt="替换文本"  title=“提示文本”/>

src是图片的路径属性，必须要有的，alt是替换文本属性，当图片显示不出来的时候用于替换，可选属性，title是提示文本，当鼠标放上去的时候用于显示文字，可选属性

width是图片宽度属性，height是图片的高度属性，border是用于设置图片边框属性

2.5 超链接标签

<a href="跳转目标" target=“目标窗口的弹出方式”>文本或图像</a>
href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能

target：用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开

下载链接：如果href里面是一个文件或者压缩包，会下载这个文件

锚点链接：点击链接，可以快速定位到页面中的某个位置

1）在链接文本的href属性中，设置属性值为 #名字 的形式，如<a href="#two">第二集</a>

2）找到目标位置标签，里面添加一个id属性 = 刚才的名字，如：<h3 id = "two">第二集介绍</h3>

2.6 表格标签

基本标签

1）<table> 是用于定义表格的标签

2）<tr>标签用于定义表格中的行，必须嵌套在<table>标签中

3）<td>标签是用于定义表格中的单元格，必须嵌套在<tr>标签中

4）<th>标签是用于定义表格中的表头单元格，文字会加粗并且居中显示

表格属性

属性名	属性值	描述
align	left，center，right	规定表格相对周围元素的对齐方式
border	1或""	规定表格单元是否拥有边框，默认为"",表示没有边框
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认1像素
cellspacing	像素值	规定单元格之间的空白，默认2像素
width	像素值或百分比	规定表格的宽度

表格结构标签

1）<thead>：用于定义表格的头部，<thead>标签内部必须拥有<tr>标签。一般是位于第一行。

2）<tbody>：用于定义表格的主体，主要用于存放数据本体。

合并单元格

1）跨行合并：rowspan="合并单元格的个数"

2）跨列合并：colspan="合并单元格的个数"

2.7 列表标签

表格是用来显示数据的，列表是用来布局的。

列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。

根据使用场景不同，列表可以分为三大类，有序列表，无序列表，自定义列表。

无序列表：

<ul> 标签表示html 页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用<li> 标签定义

有序列表：

有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。

<ol> 标签表示html 页面中项目的有序列表，列表排列以数字来显示，并且使用<li> 标签来显示列表项

自定义列表：

在html 中，<dl>标签用于定义描述列表（或定义列表），该标签会与<dt> 和<dd> 一起使用

其基本语法如下：

<dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
</dl>

2.8 表单标签

1）表单的组成

在HTML中，一个完整的表单通常由表单域、表单控件和提示信息三个部分组成。

2）表单域

表单域是一个包含表单元素的区域

在HTML中，form标签用于定义表单域，以实现用户信息的收集和传递

3）表单控件

input输入表单元素、select下拉表单元素、textarea文本表单元素

input标签type属性的取值

属性值	描述
button	用于可点击按钮
checkbox	定义复选框
file	定义输入字段和浏览按钮，供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段，该字段中的字符被掩码
radio	定义单选按钮
reset	定义重置按钮，重置按钮会清除表单中的所有数据
submit	定义提交按钮，提交按钮会把表单数据发送到服务器
text	定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符

<label>标签：

label标签为input元素定义标签

label标签用于绑定一个表单元素，当点击label标签内的文本时，浏览器就会自动将焦点选择对应的表单元素上，用来增加用户体验

  <label for="sex">男</label>
  <input type="radio" name="sex" id="sex"/>

select下拉表单元素：

1）<select>至少包含一对<option>

2）在<option>中定义selected = "selected" 时，当前项即为默认选择项

textarea文本域标签：

文本域可以帮助我们输入大量的文字