2020.6.27 HTML总结

HTML总结:

一、HTML基本结构

<html>
	<head>
		<title>这是一个文本</title>
	</head>
​	<body>
		文本
	</body>
</html>

< html >元素是 HTML 页面的根元素
< head > 元素包含了文档的元(meta)数据,如 < meta charset=“utf-8” > 定义网页编码格式为 utf-8。
< title > 元素描述了文档的标题
< body > 元素包含了可见的页面内容

二、HTML标签

1.分隔标签

强制断行标签"<br>"
强制分段标签“<p>”
空格“<&nbsp>”

2.排版标签

置中标签
<center>内容<center>
保持原始数标签
<pre>内容</pre>

3.字体标签

1.) < h >标签

标题(Heading)是通过 < h1 > - < h6 > 标签进行定义的。

< h1 > 定义最大的标题。 < h6 > 定义最小的标题。
< hr > 标签在 HTML 页面中创建水平线。

<h1>一行文本</h1>
<h2>一行文本</h2>
<h3>一行文本</h3>
<h4>一行文本</h4>
<h5>一行文本</h5>
<h6>一行文本</h6>
<hr/> <!--我是水平线-->

效果:

一行文本

一行文本

一行文本

一行文本

一行文本
一行文本

2.) < p >标签

段落是通过 < p > 标签定义的。

<p>我是段落</p>
<p>我也是段落</p>

效果:

我是段落

我也是段落

3.) < a >标签

HTML使用标签 < a >来设置超文本链接。
格式:
< a href=“url” target=“目标窗口”>链接文本< /a>
目标窗口:_blank 新窗口打开_parent 在原窗口打开

<a href="http://www.baidu.com/" target="_parent">在当前窗口打开百度</a>
<a href="http://www.baidu.com/" target="_blank">在新窗口打开百度</a>

效果:

在新窗口打开百度
在当前窗口打开百度

4.)文本格式标签:

< b >加粗
< strong >加粗
< del >删除线
< i >倾斜
< em >倾斜
< sub >下标
< sup >上标
< small >变小

<b>我是加粗</b>
<strong>我也是加粗</strong>
<del>我是删除线</del>
<i>我是倾斜</i>
<em>我也是倾斜</em>
文本<sub>我是下标</sub>
文本<sup>我是上标</sup>
<small>我是变小</small>
<pre>我是预格式化</pre>

效果:

我是加粗
我也是加粗
我是删除线
我是倾斜
我也是倾斜
文本我是下标
文本我是上标
我是变小

我是预格式化

5.) < img >图片标签

HTML使用< img> 标签来添加图片
格式:< img src=“图片路径” alt=“图片描述” width=“宽” height="高" title=“图片标题”/>

< img src="./img/logo.jpg"  alt="加载失败" width="400" height="200" title="图片标题"/>

6.)< ul >< ol >标签

无序列表:
无序列表是一个项目的列表,默认使用粗体圆点(典型的小黑圆圈)进行标记。(Type类型:disc、square、circle)

<ul>
<li>雁塔区</li>
<li>新城区</li>
<li>长安区</li>
</ul>

效果:

  • 雁塔区
  • 新城区
  • 长安区

有序列表:

有序列表也是一列项目,列表项目使用数字进行标记。 有序列表始于 < ol > 标签。每个列表项始于 < li > 标签。列表项使用数字来标记。(Type类型:A、a、1、I、i)

<ol>
<li>雁塔区</li>
<li>新城区</li>
<li>长安区</li>
</ol>

效果:

  1. 雁塔区
  2. 新城区
  3. 长安区

7.) < table >表格标签

表格由 < table > 标签来定义。每个表格均有若干行(由 < tr > 标签定义),每行被分割为若干单元格(由 < td > 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
表格的表头使用 < th> 标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本

<table border="1">
    <tr>
        <th rowspan="2">陕西省</th>
        <th>副省级市</th>
        <th colspan="2">地级市</th>
    </tr>
    <tr>
        <td rowspan="2">西安市</td>
    </tr>
    <tr>
        <td>咸阳市</td>
        <td>渭南市</td>
        <td>商洛市</td>
    </tr>
</table>

效果:

陕西省副省级市地级市
西安市
咸阳市渭南市商洛市

< border> 边框线
< width> 宽度
< bgcolor>背景色
< cellpadding> 单元格填充
< cellspacing> 单元格间距
合并列 colspan
合并行 rowspan

8.) < form >表单标签

表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单使用表单标签 < form> 来设置:

<form action=”提交目标地址” method=”get/post”>
</form>
<input type=”text”/>单行文本框
<input type=”password”/>密码框
<input type=”radio”/>单选项
<input type=”checkbox”/>复选框
<input type=”number”>数值类型
<textarea ></textarea> 多行文本框

常见行内元素: a,span,img,input,select,strong,label,b
常见块级元素:p,div,ul,ol,dl,table,h1,form


版权声明:本文为weixin_42456748原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。