HTML基础知识整理

时间 2019-11-26

标签 html 基础知识整理栏目 HTML 繁體版

原文原文链接

1 什么是HTML？

HTML 指的是超文本标记语言 (Hyper Text Markup Language)。不是一种编程语言，而是一种标记语言，标记语言是一套标记标签，HTML 使用标记标签来描述网页。html

2 HTML标签

HTML 标签是由尖括号包围的关键词，好比 <html>；标签一般是成对出现的，标签对中的第一个标签是开始标签，第二个标签是结束标签。程序员

标签分类：编程

双标签 html <标签名> 内容 </标签名>
单标签(也称为空标签) hr <标签名 />

标签关系分为两种：浏览器

嵌套关系

<head> 
     <title> </title>
</head>

并列关系

<head></head>
<body></body>

3 HTML基本结构

以下所示：服务器

<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>...</body>
</html>

代码讲解：
1. <html></html>称为根标签，全部的网页标签都在<html></html>中。
2. <head> 标签用于定义文档的头部，它是全部头部元素的容器。头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签。
3. 在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。

在head中设置网页标题和字符集编码
<head>
    <title>这里是标题</title>
    <meta charset="utf-8"/>
</head>

4 标签语义化

所谓标签语义化，就是指标签的含义。网络

为何要有语义化标签编程语言

方便代码的阅读和维护。
同时让浏览器或是网络爬虫能够很好地解析，从而更好分析其中的内容。
使用语义化标签会具备更好地搜索引擎优化。语义是否良好，在于当咱们去掉CSS以后，网页结构依然阻止有序，而且有良好的可续性。也就是说，一眼看去知道哪一个是重点结构是什么，知道每一块的内容有什么做用。

遵循的原则是先肯定语义的HTML，再选合适的CSS。post

5 段落标签

<p>段落 </p>
<p>标签的默认样式，段前段后都会有空白。

6 换行标签

若是但愿在不产生一个新段落的状况下进行换行（新行），请使用 <br /> 标签：
<p>Helloween<br/>World！<br/>I'm Coming!</p>

7 标题标签

标题标签一共有6个，h一、h二、h三、h四、h五、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。而且依据重要性递减。<h1>是最高的等级。优化

语法： <hx>标题文本</hx> (x为1-6)

标题标签的样式都会加粗，h1标签字号最大，h2标签字号相对h1要小，以此类推h6标签的字号最小。一个标题标签要独占一整行。网站

8 水平线标签

<hr /> 标签在 HTML 页面中建立水平线,可用于分隔内容。
<p>Welcome to China!</p>
<hr/> 是单标签
<p>Thank you!</p>

9 注释

注释的做用是为了解释代码的用途，方便程序员查找以及他人阅读。常见的注释有：

<!--注释-->     
/*注释*/
可使用快捷键  ctrl+/ 或者 ctrl+shift+/

10 div span标签

div span没有语义，它的做用是为告终合CSS设置单独的样式使用。

语法：
<div>分割</div>
<span>跨度</span>

11 列表

列表分为无序列表、有序列表和自定义列表无序列表：使用ul-li标签实现，没有先后顺序的信息列表。

语法：
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	...
</ul>

有序列表：使用ol-li标签实现，是有先后顺序的信息列表。

语法：
<ol>
	<li>6</li>
	<li>5</li>
	<li>4</li>
	...
</ol>

自定义列表：使用dl-dt-dd标签实现，一般用于对术语或名词进行解释和描述，自定义列表的列表项前没有任何项目符号。

语法：
<dl>
	<dt></dt>
	<dd></dd>
	<dd></dd>
	...
	<dt></dt>
	<dd></dd>
	<dd></dd>
	...
</dl>

12 表格

建立表格几元素：table(定义表格)、tr(行)、td(列)、thread(表格头部)、th(表格表头)、tbody(表格主体) 除此以后还有<caption>指定表格标题，rowspan合并行，colspan合并列。

语法：
<table>
	<caption>标题</caption>
	<tr>第一行<td>第一列</td><td colspan="2">跨两列</td><td></td></tr>
	<tr>第二行<td>第二列</td><td></td><td></td></tr>
</table>

13 超连接

超连接类型分为三种：1 内部连接 2 外部连接 3 锚连接

语法：
<a href="跳转目标" target="目标窗口的弹出方式" title="鼠标滑过显示的文本">连接显示的文本</a>
href：用于指定连接目标的url地址，当为标签应用href属性时，它就具备了超连接的功能。  Hypertext Reference的缩写。意思是超文本引用
target：用于指定连接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，_blank为在新窗口中打开方式。

注意：

1.外部连接须要添加 http:// www.baidu.com

2.内部连接直接连接内部页面名称便可好比 < a href="index.html"> 首页 </a >

3.若是当时没有肯定连接目标时，一般将连接标签的href属性值定义为“#”(即href="#")，表示该连接暂时为一个空连接。

4.不只能够建立文本超连接，在网页中各类网页元素，如图像、表格、音频、视频等均可以添加超连接。

锚点定位（难点）经过建立锚点连接，用户可以快速定位到目标内容。建立锚点连接分为两步：

使用“a href=”#id名>“连接文本"</a>建立连接文本（被点击的） <a hef="#mao"></a>
使用相应的id名标注跳转目标的位置。 <a id="mao">跳转到锚连接</a>

14 图片

语法：
<img src="图片地址" alt="指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本" title = "提示文本">

15 表单

网站怎样与用户进行交互？答案是使用HTML表单(form)。表单是能够把浏览者输入的数据传送到服务器端，这样服务器端程序就能够处理表单传过来的数据。

<form method="传送方式" action="服务器文件" name="表单名称">
action：在表单收集到信息以后，须要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的URL地址。
method:用于设置表单数据的提交方式，取值为get或post。
name：用于知道你跟表单的名称，以便于区分同一个页面中的多个表单。

表单控件：单行文本输入框、密码输入框、复选框、单选框、提交按钮、重置按钮等，都必须放在<form></from>标签之间。

单行文本输入框：当用户要在表单中输入字母、数字等内容时，就须要文本输入框，文本框也能够转化为密码输入框。

语法：
<form>
	<input type="text/password" name="名称" value="文本" />
</form>
当type="text"对应的就是文本输入框；当type="password",对应的就是密码输入框。

复选框：

<input type="checkbox" value="值" name="名称" checked="checked"/> 好比我的资料填写爱好的勾选

单选框：

<input type="radio" value="值" name="名称" checked="checked"/>  好比性别的选取

多行文本框：

<textarea rows="行数" cols="列数">文本</textarea>  好比备注的填写

下拉框：

<select>
	<option value="提交值" selected="selected">选项</option>
	<option value="提交值">选项</option>
	<option value="提交值">选项</option>
	...
</select>

按钮：

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