全栈工程师必须要掌握的前端Html技能
![](https://img2023.cnblogs.com/blog/1068941/202311/1068941-20231116203116450-187152927.png)
HTML介绍
-
标签是由尖括号包围的关键字。如:<html> -
标签有两种表现形式: -
双标签 如:<html> </html> -
单标签,如:<img />
HTML5的DOCTYPE声明
HTML5基本骨架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
1. html标签
2. head标签
3. body标签
4. title标签
5. meta标签
标题标签
1. 标题介绍与应用
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
2. 正确使用标题
-
请确保将Html标题标签只用于标题,不要仅仅是为了生成粗体或大号的文本而使用标题。 -
正确使用标题有益于SEO -
应该将h1用作主标题(最重要的)其次 是h2(次要的),再其次是h3,依次类推。
3. 标题标签的位置摆放
段落标签
<p>这是一个段落</p>
<p>这是另外一个段落</p>
换行标签
<p>同一个段落内<br />有换行,也可以<br />再换一行</p>
水平线
<hr width="200" color="red" align="left" size="4">
-
color:设置水平线的颜色 -
width:设置水平线的长度 -
size: 设置水平线的高度 -
align: 设置水平线的对齐方式,默认居中,可取值left|right
图片标签
<img src="1.jpg" alt="这是一张照片" width="300" height="300" title="这是图片的标题">
-
src:图片路径与名字,可以是相对路径,绝对路径,网络路径 -
alt:规定图像的替代文本,即图像不显示时显示的内容 -
widht:设置图像的宽度 -
height:设置图像的高度 -
title:鼠标悬停在图片上显示的提示信息
-
绝对路径:电脑的盘符存储与访问的具体地址 -
网络路径:表示网络上的一张图片所对应的路径 -
相对路径:两者相对关系,同一路径下可直接访问。相对路径之间的关系,主要有以下几种: -
子级关系:/ -
父级关系:../ -
同级关系:./
<!--绝对路径,不建议使用-->
<img src="D:\test\1.png" alt="这是一张绝对路径的图片">
<!--相对路径-->
<img src="1.jpg" alt="这是一张相对路径照片" width="300" height="200" title="这是图片的标题">
<!--网络路径-->
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="这是一张网络图片">
超链接标签
1. 超链接描述
2. 超链接属性
-
一个未访问过的链接显示为蓝色字体,并带有下划线。 -
访问过的链接显示为紫色并带有下划线。 -
点击链接时,链接显示为红色并带有下划线。
<a href="https:www.baidu.com">百度一下,你就知道</a>
<a href="https:www.baidu.com">
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="这是一张网络图片">
</a>
文本标签
-
em标签,定义着重文字 -
b标签,定义粗体文字 -
i标签,定义斜体文字 -
strong标签,定义加重语气 -
del标签,定义删除字 -
span标签,元素没有特定的含义
<em>着重文字标签em</em>
<b>粗体文字标签b</b>
<i>斜体标签i</i>
<strong>加重语气标签strong</strong>
<del>定义删除文本del</del>
<span>无特殊含义标签span,为以后css做准备</span>
有序列表标签
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
1. 有序列表的type属性
-
1 表示列表项目用数字标号(1,2,3...) -
a 表示列表项目用小写字母标号(a,b,c,...) -
A 表示列表项目用大写字母标号(A,B,C...) -
i 表示列表项目用小写罗马字符标号(i,ii,iii...) -
I表示列表项目用大写罗马字符标号(I,II,III...)
2. 有序列表嵌套
<ol>
<li>第一项</li>
<li>
<ol>
<li>第1.1项内容</li>
<li>第1.2项内容</li>
<li>第1.3项内容</li>
</ol>
</li>
<li>第二项</li>
<li>第三项</li>
</ol>
无序列表标签
<ul>
<li>苹果</li>
<li>橘子</li>
<li>梨</li>
</ul>
1. 无序列表的type属性
-
disc,默认实心圈 -
circle,空心圆 -
square 默认小方块 -
none 不显示
2. 无序列表嵌套
<ul>
<li>蔬菜</li>
<li>水果
<ul>
<li>苹果</li>
<li>橘子</li>
<li>梨</li>
</ul>
</li>
<li>树木</li>
</ul>
3. 常见应用场景
-
无序的列表效果,如新闻列表等 -
导航效果,绝大多数的导航都是基于无序列表实现的。
表格标签
1. 表格组成与特点
-
表格右行,列,单元格组成 -
单元格特点:同行等高,同列等宽。
-
表格标签:table -
行:tr -
单元格:td
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
2. 表格属性
-
border 设置表格的边框 -
width 表格的宽度 -
height 表格的高度
3. 单元格合并
-
水平合并,colspan=”合并的列数” -
垂直合并,rowspan=”合并的行数”
表单标签
<form action="" method="post">
<input type="text" name="" id="">
<input type="button" value="">
</form>
-
action 服务请求的地址 -
name 表单的名称 -
method 提交数据的方式,主要有get和post两种,主要区别如下: -
数据提交方式,get提交的数据url可以看到,post看不到 -
get一般用于提交少量的数据,post用来提交大量的数据。
表单元素
1. 文本框
2. 密码框
3. 提交按钮
块元素和行内元素(内联元素)
-
元数据类型(metadata content) -
区块型(sectioning content) -
标题型(heading content) -
文档流型(flow content) -
语句型(phrasing content) -
内嵌型(embedded content) -
交互型(interactive content)
1. 内联元素和块级元素的区别
-
块元素 -
块元素会在页面中单独占一行(多个块级元素,自上而下排列) -
可以设置width,height属性 -
一般块级元素可以包含行内元素和其他块级元素。 -
内联元素 -
行内元素不会在页面中单独占据一行,只占自身的大小。 -
行内元素设置width,height无效 -
一般内联元素不包含块级元素。
2. 常见示例
HTML5新增标签
关于H5中新增的标签,常见如下所示:
-
header标签,头部 -
nav标签,导航 -
section 定义文档中的章节,页眉,页脚 -
aside 侧边栏 -
footer 页面底部 -
article 代表一个独立的,完整的相关内容块,例如一篇完整的论坛帖子,一篇博客文章,一个评论等。
作者:老码识途
出处:http://www.cnblogs.com/hsiang/
本文版权归作者和博客园共有,写文不易,支持原创,欢迎转载【点赞】,转载请保留此段声明,且在文章页面明显位置给出原文连接,谢谢。
关注个人公众号,定时同步更新技术及职场文章