HTML基础总结

原创

已于 2022-03-14 11:22:40 修改 · 387 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#html #html5 #前端 #web

于 2020-02-20 13:32:16 首次发布

HTML(Hyper text markup language)：超文本标记语言。

一、HTML文档结构：

<!------ HTML文档结构 ------>
<!-- 声明文档类型 -->
<!doctype html>
<!-- 根标签 -->
<html>
<!-- 头标签 -->
<head>
	<!-- 标题标签 -->
	<title></title>
</head>
<!-- 主体标签 -->
<body>
</body>
</html>

二、HTML普通标签

1、段落标签

<!-- 段落标签 -->
<p>文本内容</p>

特点：上下自动生成空白行。换行(br标签)不会生成空白行。

2、文字标签

<!-- 文字标签 -->
<font>文本内容</font>

文本格式化标签：

文本加粗标签

    <!-- 文本加粗标签 -->
	<!-- 工作中尽量用strong -->
	<strong>加粗内容</strong>
	<b>加粗内容</b>

文本倾斜标签

    <!-- 文本倾斜标签 -->
	<!-- 工作中尽量用em -->
	<em>倾斜内容</em>
	<i>倾斜内容</i>

删除线标签

    <!-- 删除线标签 -->
	<!-- 工作中尽量用del -->
	<del>删除线内容</del>
	<s>删除线内容</s>

下划线标签

    <!-- 下划线标签 -->
	<!-- 工作中尽量用ins -->
	<ins>下划线内容</ins>
	<u>下划线内容</u>

标题标签

h1~h6，h1定义最大的标题，h6 定义最小的标题；
h1 在一个页面里只能出现一次；

    <!-- 标题标签 -->
	<h1>标题1</h1>
	<h2>标题2</h2>
	<h3>标题3</h3>
	<h4>标题4</h4>
	<h5>标题5</h5>
	<h6>标题6</h6>

3、图片标签

<!-- 图片标签 -->
<img src="图片的来源"  alt="替换文本" title="提示文本" width="图片宽度" height=
"图片高度"/>

src：图片的来源，必写属性；
alt：替换文本，图片不显示的时候显示的文字；
title：提示文本，鼠标放到图片上显示的文字；
width：图片宽度；
height：图片高度；

4、超链接标签

超链接

 <!-- 超链接标签 -->
<a href="去往的路径" title="提示文本" target="跳转方式"/>

href：去往的路径(跳转的页面)必写属性；
title：提示文本，鼠标放到链接上显示的文字；
target=”_self”：默认值，在自身页面打开(关闭自身页面，打开链接页面)
target=”_blank”：打开新页面(自身页面不关闭，打开一个新的链接页面)

锚链接

1、先定义一个锚点：

2、超链接到锚点：回到顶部

空链

<a href=”#”>

链接优化写法，让所有超链接都在新窗口打开：

<base target=”_blank”>

特殊字符

<!-- 空格 -->
&nbsp; 
<!--  <(小于) -->
&lt;  
<!--  >(大于) -->
&gt;   
<!--  版权 -->
&copy;
<!--  人民币符号 -->
&yen;

5、列表标签

无序列表

    <!-- 无序列表 -->
	<ul type=”circle”>
		<li>列表项</li>
		<li>列表项</li>
		<li>列表项</li>
	</ul>

type=”square”：小方块；
type=”disc”：实心小圆圈；
type=”circle”：空心小圆圈；

有序列表

    <!-- 有序列表 -->
	<ol type=”1">
		<li>列表项</li>
		<li>列表项</li>
		<li>列表项</li>
	</ol>

type=”1,a,A,i,I”，
start=”3” 决定了开始的位置。

自定义列表

    <!-- 自定义列表 -->
	<dl>
		<dt>小标题</dt>
		<dd>解释标题1</dd>
		<dd>解释标题2</dd>
	</dl>

6、表格标签

表格标签：展示数据，是对网页重构的一个有益补充。

快速创建表格：table>tr*3>td*3

<!-- 表格标签 -->
<!-- 表格 -->
<table border="1" width="300" height="300" cellspacing="0" cellpadding="10" align=
"center" bgcolor="green">
<!-- 行 -->
	<tr>
		<!-- 列 -->
		<td align="center">张三</td>
		<td>18</td>
		<td>经理</td>
	</tr>
</table>

属性：
border=”1”：边框；
width=”500”：宽度；
height=”300”：高；
cellspacing=”2”：单元格与单元格的距离；
cellpadding=”2”：内容距边框的距离；
align=”left | right | center” ；
如果直接给表格用align=”center”：表格居中；
如果给tr或者td使用，tr或者td的内容居中；
bgcolor=”red”：表格的背景颜色

表格的标准结构(了解就行，对seo更友好)

<!-- 表格的标准结构 -->
	<table>
		<thead>
			<tr>
				<td></td>
				<td></td>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td></td>
				<td></td>
			</tr>

最低0.47元/天解锁文章