HTML基本标签及语法HTML简介
什么是HTML
本⽂素材来源于⿊马程序员Pink⽼师
HTML 指的是超⽂本标记语⾔(Hyper Text Markup Language) ，它是⽤来描述⽹页的⼀种语⾔。HTML 不是⼀种编程语⾔，⽽是⼀种标记语⾔(markup language)。
标记语⾔是⼀套标记标签(markup tag)。
Web 标准的构成
主要包括结构（Structure）、表现（Presentation）和⾏为（Behavior）三个⽅⾯。
结构 --> 结构⽤于对⽹页元素进⾏整理和分类，现阶段主要学的是HTML
表现 --> 表现⽤于设置⽹页元素的版式、颜⾊、⼤⼩等外观样式，主要指的是CSS
⾏为 --> ⾏为是指⽹页模型的定义及交互的编写，现阶段主要学的是Javascript
Web 标准提出的最佳体验⽅案：结构、样式、⾏为相分离。
简单理解：结构写到HTML ⽂件中，表现写到CSS ⽂件中，⾏为写到JavaScript ⽂件中。HTML基本语法
HTML基本⾻架
标签名定义说明
<html><\html>HTML标签页⾯中最⼤的标签，所有内容都包含在该标签内
<body><\body>⽂档头部设置⼀些属性，以及引进⽂件样式
<title><\title>⽂档标题浏览器所显⽰的⽹页标题
<body><\body>⽂档主题基本上⼀个⽹页的所有页⾯元素都放进该标签内
⼀个基本的⽹页⾻架
<!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>
<div>我的第⼀个⽹页</div>
</body>
</html>
基本语法概述
1. HTML 标签是由尖括号包围的关键词，例如<html>。
2. HTML 标签通常是成对出现的，例如<html>和</html>，我们称为双标签。标签对中的第⼀个标签是
开始标签，第⼆个标签是结束标签。
3. 有些特殊的标签必须是单个标签（极少情况），例如<br />，我们称为单标签。
4. 双标签关系可以分为两类：包含关系和并列关系
如body与div这样的标签关系我们称为包含关系
<body>
<div></div>
</body>
⼜如body中div与div这样的标签关系我们称为并列关系
<body>
<div></div>
<div></div>
</body>
HTML 常⽤标签
HTML 提供了6 个等级的⽹页标题，标题标签<h1> - <h6>
<p>标签⽤于定义段落，它可以将整个⽹页分为若⼲个段落。
如果希望某段⽂本强制换⾏显⽰，就需要使⽤换⾏标签<br />。
字体加粗<strong></strong>
字体倾斜<em></em>
图像标签
该标签可实现在⽂档中插⼊⼀张图⽚
基本语法
<img src="图⽚地址" alt="图⽚显⽰不出来时的替换⽂字">
锚点链接
该标签可实现在⽂档中插⼊⼀个外部标签
基本语法：
<a href="跳转地址"></a>
tips：
如果想在浏览器中实现类似于百度百科那种点击连接达到页⾯的某⼀处，可以设置锚点连接
<a href="#live">个⼈⽣活</a><br />
<h3 id="live">个⼈⽣活</h3>
这样便可实现锚点连接
<div>和<span>标签
<div>和<span>是没有语义的，它们就是⼀个盒⼦，⽤来装内容的
<div> 这是头部</div>
<span> 今⽇价格</span>
div 是division 的缩写，表⽰分割、分区。span 意为跨度、跨距
表格标签
表格主要⽤于显⽰、展⽰数据，因为它可以让数据显⽰的⾮常的规整，可读性⾮常好。特别是后台展⽰数据的时候，能够熟练运⽤表格就显得很重要。⼀个清爽简约的表格能够把繁杂的数据表现得很有理。
表格标签基本格式
1. <table> </table>是⽤于定义表格的标签。
2. <tr> </tr>标签⽤于定义表格中的⾏，必须嵌套在<table> </table>标签中。（tr即 table row）
3. <td> </td>⽤于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
4. 字母td 指表格数据（table data），即数据单元格的内容。
表头标签
<th> 标签表⽰HTML 表格的表头部分(table head 的缩写)
表头标签会使单元格内的⽂本加粗居中显。
合并单元格
合并单元格⽅式：
跨⾏合并：rowspan="合并单元格的个数"
跨列合并：colspan="合并单元格的个数"
列表
表格是⽤来显⽰数据的，那么列表就是⽤来布局的。
列表最⼤的特点就是整齐、整洁、有序，它作为布局会更加⾃由和⽅便。
根据使⽤情景不同，列表可以分为三⼤类：⽆序列表、有序列表和⾃定义列表。
⽆序列表
<ul>标签表⽰HTML 页⾯中项⽬的⽆序列表，⼀般会以项⽬符号呈现列表项，⽽列表项使⽤<li>标签定义
⽆序列表的基本语法格式如下：
<ul>
<li>列表项1</li>
html href属性
<li>列表项2</li>
<li>列表项3</li>
</ul>
1. ⽆序列表的各个列表项之间没有顺序级别之分，是并列的。
2. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输⼊其他标签或者⽂字的做法是不被允许的。
3. <li>与</li>之间相当于⼀个容器，可以容纳所有元素。
4. ⽆序列表会带有⾃⼰的样式属性，但在实际使⽤时，我们会使⽤CSS 来设置。
有序列表
有序列表即为有排列顺序的列表，其各个列表项会按照⼀定的顺序排列定义。
在HTML 标签中，<ol>标签⽤于定义有序列表，列表排序以数字来显⽰，并且使⽤<li>标签来定义列表项。
有序列表的基本语法格式如下：
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
1. <ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输⼊其他标签或者⽂字的做法是不被允许的。
2. <li>与</li>之间相当于⼀个容器，可以容纳所有元素。
3. 有序列表会带有⾃⼰样式属性，但在实际使⽤时，我们会使⽤CSS 来设置。
⾃定义列表
在HTML 标签中，<dl>标签⽤于定义描述列表（或定义列表），该标签会与<dt>（定义项⽬/名字）和<dd>（描述每⼀个项⽬/名字）⼀起使⽤。
其基本语法如下：
<dl>
<dt>名词1</dt>
<dd>名词解释1</dd>
<dd>名词解释2</dd>
</dl>
1. <dl></dl>⾥⾯只能包含<dt>和<dd>。
2. <dt>和<dd>个数没有限制，经常是⼀个<dt>对应多个<dd>。
表单
基本格式
表单域是⼀个包含表单元素的区域。
在HTML 标签中，<form>标签⽤于定义表单域，以实现⽤户信息的收集和传递。
<form>会把它范围内的表单元素信息提交给服务器.
<form action="url地址" method="提交⽅式"  name="表单域名称">
各种表单元素控件
</form>
三种表单控件
在表单域中可以定义各种表单元素，这些表单元素就是允许⽤户在表单中输⼊或者选择的内容控件。
1. input输⼊表单元素
2. select下拉表单元素
3. textarea ⽂本域元素
<input>表单元素
在<input>标签中，包含⼀个type 属性，根据不同的type 属性值，输⼊字段拥有很多种形式（可以是⽂本字段、复选框、掩码后的⽂本控件、单选按钮、按钮等）。
<input type="属性值" />
<input>表单元素：
button定义可点击按钮（多数情况下，⽤于通过 JavaScript 启动脚本）。
checkbox定义复选框。
file定义输⼊字段和 "浏览"按钮，供⽂件上传。
hidden定义隐藏的输⼊字段。
image定义图像形式的提交按钮。
password定义密码字段。该字段中的字符被掩码。
radio定义单选按钮。
reset定义重置按钮。重置按钮会清除表单中的所有数据。
submit定义提交按钮。提交按钮会把表单数据发送到服务器。
text定义单⾏的输⼊字段，⽤户可在其中输⼊⽂本。默认宽度为 20 个字符。
tips：
<label>表单元素
<label>标签⽤于绑定⼀个表单元素, 当点击<label>标签内的⽂本时，浏览器就会⾃动将焦点(光标)转到或者选择对应的表单元素上,⽤来增加⽤户体验.
语法：
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />
核⼼：<label>标签的for 属性应当与相关元素的id 属性相同。
<select>表单元素
在页⾯中，如果有多个选项让⽤户选择，并且想要节约页⾯空间时，我们可以使⽤<select>标签控件定义下拉列表.
语法：
<select>
<option>选项⼀</option>
<option>选项⼆</option>
<option>选项三</option>
</select>
1. <select>中⾄少包含⼀对<option> 。
2. 在<option>中定义selected =“selected "时，当前项即为默认选中项。
<textarea>表单元素
<textarea rows="3" cols="20">
⽂本内容
</textarea>
1. 通过<textarea>标签可以轻松地创建多⾏⽂本输⼊框。
2. cols=“每⾏中的字符数”，rows=“显⽰的⾏数”

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。