菜单 搜索
首页 前端知识 HTML5（超文本标记语言）

HTML5（超文本标记语言）

2024-05-31 20:05:46 前端知识 前端哥 49 379 我要收藏

目录

一、web概念概述

    1. C/S: Client/Server 客户端/服务器端

    2. B/S: Browser/Server 浏览器/服务器端

        （1） 静态资源：

        （2）动态资源：

二、HTML

1. 概念：是最基础的网页开发语言

2. 快速入门：

3. 标签学习：

 （1）文件标签：构成html最基本的标签    

 （2）语义化标签（html5新的语意结构元素）

 （3）分割线标签

 （4）文本标签：和文本有关的标签

   (5) 超链接标签 

   (6) 表格标签

 （7）图片标签

 （8）音乐标签：audio

 （9）视频标签：video

 （10）列表标签

 （11）表单标签

 （12）容器（盒子）标签

4. 属性

5. 元素（标签）属性                          

https://www.w3school.com.cn/          w3school在线教程学习网站 
https://www.runoob.com/                  菜鸟教程学习网站 

一、web概念概述

* JavaWeb：
    * 使用Java语言开发基于互联网的项目

* 软件架构：

    1. C/S: Client/Server 客户端/服务器端

        * 在用户本地有一个客户端程序，在远程有一个服务器端程序
        * 如：QQ，迅雷...
        * 优点：
            （1） 用户体验好
        * 缺点：
            （2）开发、安装，部署，维护 麻烦

    2. B/S: Browser/Server 浏览器/服务器端

        * 只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序
        * 优点：
            （1）开发、安装，部署，维护 简单
        * 缺点：
            （2）如果应用过大，用户的体验可能会受到影响
            （3）对硬件要求过高

* B/S架构详解
    * 资源分类：

        （1） 静态资源：

            * 使用静态网页开发技术发布的资源。
            * 特点：
                * 所有用户访问，得到的结果是一样的。
                * 如：文本，图片，音频、视频, HTML,CSS,JavaScript
                * 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源

静态资源：
        * HTML：用于搭建基础网页，展示页面的内容
        * CSS：用于美化页面，布局页面
        * JavaScript：控制页面的元素，让页面有一些动态的效果

        （2）动态资源：

            * 使用动态网页及时发布的资源。
            * 特点：
                * 所有用户访问，得到的结果可能不一样。
                * 如：jsp/servlet,php,asp...
                * 如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器

二、HTML

1. 概念：是最基础的网页开发语言

* Hyper Text Markup Language 超文本标记语言
        * 超文本:
            * 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.
        * 标记语言:
            * 由标签构成的语言。<标签名称> 如 html，xml
            * 标记语言不是编程语言

2. 快速入门：

        （1） html文档后缀名 .html 或者 .htm
        （2）标签分为
            a. 闭合标签：有开始标签和结束标签。如 <html> </html>
            b. 自闭和标签：开始标签和结束标签在一起。如 <br/>
​
        （3） 标签可以嵌套：
            需要正确嵌套，不能你中有我，我中有你
            错误：<a><b></a></b>
            正确：<a><b></b></a>
​
        （4） 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来
        （5） html的标签不区分大小写，但是建议使用小写。
​
          (6) 快捷操作emment语法：
      生成标签，直接输入标签名按tab键即可
      如果想要生成相同标签加上*号即可，如div*3
      如果生成的div类名是有顺序的，可以用自增符号$
      如果有兄弟关系的标签，用+就可以了div+p
      如果生成带有类名或ID名字的，直接写.demo或#two 点tab键就可以了

     （7）默认目录结构：
        css：存放css文档-页面装修，文字颜色，字号，大小间距，排版
        img：存放图片-icon，logo、banner，产品图
        js：javascript-页面交互，轮播图，登陆注册验证，加载效果
        index：默认的网站首页​

     （8）注释符：ctrl+？

     （9）存储页面：ctrl+s

3. html5新特性

 HTML5 现在已经不是 SGML 的子集
 
图像，位置，存储，多任务等功能的增加
  绘画 canvas
  用于媒介回放的 video 和 audio 元素
  本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失
  sessionStorage 的数据在浏览器关闭后自动删除
  语意化更好的内容元素，比如 article、footer、header、nav、section
  表单控件，calendar、date、time、email、url、search
  新的技术 webworker、websocket、Geolocation
 
 移除的元素：
  纯表现的元素：basefont、big、center、font、s、strike、tt、u
  对可用性产生负面影响的元素：frame 、frameset 、noframes
 
 支持 HTML5 新标签：
  IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签
  可以利用这一特性让这些浏览器支持 HTML5 新标签
  浏览器支持新标签后，还需要添加标签默认的样式
  当然也可以直接使用成熟的框架、比如 html5shim
复制

4. 标签学习：

 （1）文件标签：构成html最基本的标签    

       * html:html文档的根标签
        * head：头标签。用于指定html文档的一些属性。引入外部的资源
        * title：标题标签。
        * body：体标签
        * <!DOCTYPE html    >：html5中定义该文档是html文档

<!DOCTYPE html><!-- 文档声明-版本信息 -->
<html><!-- 定义html文件 --><!-- 根标签 -->
	<head><!-- 头部标签 --><!-- 属于双标签，也叫闭合标签 -->
		<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
		使用ico图标：首先把facicon.ico这个图标放到根目录下，在html的head里引入代码
		<base target="_blank"/> <!-- 设置整体（所有）链接的打开状态（以新窗口打开页面），
                                              base写到<head> </head>之间 -->		
		<meta charset="utf-8" /><!-- 编码格式 --><!-- 属于单标签，也叫自闭合标签 -->
		<title>网页设计知识点</title><!-- 网页标题 -->
	</head>
	<body>
<!-- 内容主体 -->
    </body>
</html>
复制

（2）语义化标签（html5新的语意结构元素）

        <header>定义文档或节的页眉</header>
		<nav>定义文档内的导航连接</nav>
		<main>定义文档的主要内容</main>
		<article>定义文档内的文章</article>
		<section>定义文档中的节</section>
		<aside>定义页面内容之外的内容</aside>
		<details open="open" 默认不可见，需设置open属性>定义用户可查看或隐藏的细节
                                               （默认隐藏，点击查看）</details>
		<summary>定义details元素中的可见标题</summary>
		<dialog>定义对话框或窗口</dialog>
		<figure>定义自包含内容，比如图示、图标、照片、代码清单等（常用于图像与其描述组合）</figure>
		<figcaption>figere标题</figcaption>
		<Mark>定义重要或强调内容</Mark>
		<menu-item>定义用户能够从弹出菜单调用的命令或菜单项目</menu-item>
		<progress max="需要完成的值" value="进程的当前值">定义运行中的任务进度</progress>
		<meter form="meter元素所属表单" high="界定为高值的范围" low="界定为低值的范围" 
                max="规定范围的最大值" min="规定范围的最小值" optimum="规定度量的最优值"
			value="规定度量的当前值">定义已知范围内的标量测量</meter>
		<time>定义日期时间</time>
		<footer>定义文档或节的页脚</footer>
复制

语义化的理解

  用正确的标签做正确的事情！
  HTML 语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
  在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的。
  搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO 。
  使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解

（3）分割线标签

<hr />
		hr{
		width：200px；height：300px
		border：none（清除边框描边-默认自带）
		background-color：yellow
		}
复制

（4）文本标签：和文本有关的标签

        空白折叠现象：

        html中所有文字内容之间的空格，换行，缩进都会被折叠成一个空格显示

        解决方法：空格符：&nbsp;（表示一个空格）

        其他特殊字符：
                        < ：&lt;
                         > : &gt;

预格式化标签：浏览器完整保留源文件中所定义的格式，包括换行、空格、缩进以及其他特殊格式

  <pre>预格式化标签</pre> 
复制

标题标签h

（从1级标题到6级标题）,默认字体进行加粗，字号从h1到h6逐级递减
<h1></h1> ~ <h6></h6>
复制

段落标签

<p></p>   一段落一标签
复制

 字节标签

<span></span> （用来包裹一小段或几个文字在同一行显示）
复制

多行文本标签

<textarea rows="表示列宽" cols="表示行高" placeholder="提示文本"></textarea> 
（开始和结束标签之间不留空格）
      textarea{
      outline：0；取消轮廓线
      resize：none；防止拖拽文本域
}
复制

滚动文字

<marquee behavior="scroll（循环往复滚动）/slide（滚动一次就停止）
/ternate（来回交替滚动）" direction="up/down/left（向左滚动，默认值）/right（滚动方向）"
scrollamount="滚动速度，单位px（每次移动的长度）"
 scrolldelay="滚动延迟时间，单位ms（延迟时间越小滚动速度越快）" 
loop="滚动循环次数，一般为整数（-1表示无限循环）"
onmouseover="this.stop()" onmouseout="this.start() 
style="width: 600px; height: 100px;"> //需要设置宽高显示
</marquee>
复制

强调加粗标签（自带加粗效果）

<strong>内容</strong>
复制

  * <b>：字体加粗

强调倾斜标签（自带倾斜效果）

<em>内容</em>
复制

  * <i>：字体斜体

强制换行标签

<br /> 一换行一标签
复制

 (5)超链接标签 <a></a> , 插入超链接

<a href="链接地址"></a>
<a href="javascript:;"></a>阻止超链接跳转
		链接地址：
		绝对地址：http协议（https://baidu.com）
		相对地址：新建的同级html页面（homework.html）
<a href="#"></a> #代表空链接
		
<a target="是否在新标签页面打开链接"></a> 属性值：“_blank” 表示在在新标签页面打开链接
                                /“_parent”上一级窗口打开/“_self”同一窗口打开，默认值
                                /“_top”整个窗口打开/“_framename”框架或浮动框架名
<a title="">设置鼠标悬停文本：指向链接时的提示信息</a>
 
a{
text-decoration：none；超链接下划线隐藏
}
复制

(6)表格标签

        <table></table> 标签定义表格
		<caption>表格标题</caption> （标题会居中显示在表格之上）
		<thead></thead> 用于定义表格头部，用来放标题
		<th></th>（定义表头-）
		<tbody></tbody> 用来定义表格主体，放数据本体
		<tr></tr>（定义表格行-几行）
		<td></td>（定义表格单元-每列横向单元格内内容）标签组成
		<tfoot></tfoot>放表格的脚注之类
复制

table标签的属性：
        cellspacing：表示单元格与单元格之间的距离
        cellpadding：表示单元格<td></td>内边距到其内容之间的距离
        border：边框
        border-collapse:collalse;边框重叠合并

合并单元格：
            a.先确定跨行还是跨列合并（rowspan：跨行 colspan：跨列）
            b.根据 先上后下 先左后右 的原则找到目标单元格，然后写上合并方式还有要合并的单元格数量，比如
              rowspan=“2”：跨行（上下合并-2行）
              colspan=“3”：跨列（左右合并-3列）
            c.删除多余的单元格

<table border="" cellspacing="1px" cellpadding="2px">
 
     <thead>
            <caption>学生课程表</caption>
 
			<tr> -第一行
				<th>星期一</th> 第一列
				<th>星期二</th> 第二列
				<th>星期三</th> ...
				<th>星期四</th>
				<th>星期五</th>
				<th>星期六</th>
				<th>星期日</th>
			</tr>
 
      </thead>
 
       <tbody>
 
			<tr> 第二行
				<td rowspan="2">语文</td>
				<td>数学</td>
				<td>英语</td>
				<td>物理</td>
				<td>化学</td>
				<td>生物</td>
				<td colspan="3">历史</td>
			</tr>
 
			<tr> 第三行
				<td>语文</td> 合并需删除
				<td>数学</td>
				<td>英语</td>
				<td>物理</td>
				<td>化学</td>
				<td>生物</td>
				<td>历史</td>
			</tr>
...
      </tbody>
 
      <tfoot>
 
      </tfoot>
 
</table>
复制
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center">
        <tr>
            <th rowspan="2">编号</th>
            <th>姓名</th>
            <th>成绩</th>
        </tr>
 
        <tr>
            <td>小龙女</td>
            <td>100</td>
        </tr>
 
        <tr>
            <td>2</td>
            <td colspan="2">杨过</td>
        </tr>
 
    </table>
复制

（7）图片标签

<img />,插入图片<img src="图片的链接地址" title = "图片" alt="图片不能显示的替换文本" 
width="图片的宽度" height="图片的高度" />
复制

图片的链接地址：
        绝对地址：盘符 ：src = E:"\图片\动漫\2.pang"

                       （盘符：C、D、E盘）-利用盘符（原文件目录位置）方能打开 -不常用

                          http协议：src="https://baidu.com/u=193&f=GIF" -网址打开

        相对地址：src="img/1.pang"（img文件夹里）

<img> 的 title 和 alt 有什么区别
title 通常当鼠标滑动到元素上的时候显示
alt   是<img> 的特有属性，是图片内容的等价描述，用于图片无法加载显示、读屏器阅读图
片。可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分
析。

元素的垂直对齐方式（只针对于行内元素或行内块元素，一般用于图片对齐文字）
vertical-align: baseline（默认底部基线对齐）/
middle（垂直居中）/auto/top（顶部对齐）/bootom;
复制

  注意：               

           若父盒子由图片撑开，图片下面会留空隙，因为图片或表单等行内块元素，他的底线会和父级盒子基线对齐
            a.解决办法：给img：vertical-align：middle/top，即不要基线对齐
            b.把图片转换为块级元素

src 与 href 的区别
 
 src 用于替换当前元素，href 用于在当前文档和引用资源之间确立联系。
 src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在
  位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片和
  frame 等元素
 href 是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）
  或当前文档（链接）之间的链接，如果我们在文档中添加
<link href="common.css" rel="stylesheet"/> 那么浏览器会识别该文档为 css 文件，就
  会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式来加
  载 css ，而不是使用 @import 方式
复制

图像热区链接：

 <img src="图片地址" usemap="#映射图片名称">
 
 <map name="映射图片名称">
 <area shape="热区形状" coords="热区坐标" href="热区链接地址" alt="连接失效时提示信息" />
 </map>
 
        热区形状shap：rect矩形/circle圆形/poly多边形
        
        coords与shap对应的坐标值：
        rect：x1，y1 x2，y2 （4个值）
        circle：center-x，center-y，radius（3个值）
        poly：x1，y1 x2，y2 ...（（n+1）*2个值）
复制

（8）音乐标签：audio

<audio src="音乐的路径" controls="controls" autoplay="autoplay" 
loop="loop" preload="auto/metadete/none" poster="url地址">
			<source src="音频地址" />
			<source src="音频地址" />可以设置多个原文件
</audio>
 
		(controls="controls"):播放控件
		(autoplay="autoplay"):自动播放
		（loop="loop"）：循环播放
		 preload = "auto页面加载即加载视频/metadete只加载元数据/none不加载")
                    视频在页面加载时进行加载，并预备播放（使用了autoplay则忽略该属性）
		poster="url地址" 视频加载时显示的图像，默认显示视频第一帧画面
 
<bgsound src="背景音乐链接"></bgsound>
复制

（9）视频标签：video

<video src="视频的路径" width="60px" controls="controls" autoplay="autoplay"
 loop="loop" preload="auto/metadete/none"
			poster="url地址">
			<source src="视频地址" />
			<source src="视频地址" />可以设置多个原文件
</video>
 
		play播放/pause暂停
		视频可以设置宽度
		(controls="controls"):播放控件
		(autoplay="autoplay"):自动播放
		（loop="loop"）：循环播放
		(preload="auto页面加载即加载视频/metadete只加载元数据/
none不加载")视频在页面加载时进行加载，并预备播放（使用了autoplay则忽略该属性）
		poster="url地址" 视频加载时显示的图像，默认显示视频第一帧画面
		
		<embed src="多媒体文件（视频/音频/动画）" type=" " autostart="true自动播放
/false控件播放" loop="true循环/false不循环"> 有些浏览器需设置宽高
复制

（10）列表标签

a.有序列表：重点强调顺序性

<ol type="A" 更改所标序号（1/A/a/i/I）的类型> 代表有序列表
			<li>列表项内容</li> 代表列表项（按先后顺序默认用阿拉伯数字标序号并先后排列）
</ol>
 
		简写方式：ol>li*2(表示ol标签里嵌套2个li标签)单击Tab键 快速生成
<ol>
			<li></li>
			<li></li>
</ol>
复制

b.无序列表：重点强调并列关系

<ul type="disc" 更改所标序号（disc空心圆点/circle实心圆点/square方块）的类型> 代表无序列表
              （按先后顺序默认用实心圆点标注并列排列）
			<li>列表项内容</li> 代表列表项
</ul>
 
		li{list-style：none；} -列表符号隐藏
复制

c.自定义列表：用来描述名词以及解释

<dl>定义
			<dt>名词</dt>
			<dd>解释</dd>
</dl>
复制


列表声明
        css列表属性：可以设置、改变列表项标志，或者将图像作为列表项标志
        list-style:（简写属性。用于把所有用于列表的属性设置于一个声明中）
        list-style-position：inside 内部/outside 外部-默认 （将设置列表中列表项标志的位置）
        list-style-type：disc 实心圆点/square 小方块/circle 空心圆/none 取消列表标志（设置列表项标志的类型）
        list-style-image：url（图片路径-- ..表示返回上一级路径）（将图像设置为列表项标志）

（11）表单标签

<form action="表单数据的提交地址" 
 method="表单数据发送到服务器的方法 （get（小数据以铭文形式传送）/post（加密传送））"
 enctype="application/x-www-form-urlencoded"
（数据表单在发送到服务器之前编码所有字符，默认）
/"multipart/form-data"(不对字符编码，在使用包含文件上传控件的表单时，必须使用该值)
/"text/plain"(空格转换为“+”，但不对特殊字符编码) 
novalidate="true(默认不验证)/false(提交表单时进行验证)">:表单框
</form>
复制

<input /> :输入框

<input type="text/password" 改变输入框的类型 placeholder="提示信息" 
autocomplete="on" 记忆提示/"off" autofocus页面加载完成自动聚焦 >
 
			
label 标签：用于绑定一个表单元素，当点击label标签的时候，被绑定的表单元素就会自动获得输入焦点。
		   
           第一直种用法：label标签直接包括input标签（适合单个表单选择）
			<label> <input type="text"/> </label>
		
           第二种用法：用for属性规定label与哪个表单绑定
			   <label for="sex">男</label>
			   <input type="radio" id="sex">
 
复制
            取消边框：border：none
			取消外边框轮廓线：outline：none
			取消默认背景：background：none
复制

   属性（输入限制）

 
			disabled  规定输入字段应该被禁用
			readonly  规定输入字段只读（不可修改）
			required  规定输入字段必填
			pattern   规定通过其检查输入值的正则表达式
			          正则表达式：pattern="^[1][3-8]+\\d{9}$"
			                    ^表示一行的开始，$表示正则结束，[0-9]等价于\\d，
                                {9}表示整数长度为任意的9个数字，+\\d表示正整数
 
			maxlength 规定输入字段的最大字符数
			max       规定输入字段的最大值
			min       规定输入字段的最小值
			size      规定输入字段的宽度
			step      规定输入字段的合法数字间隔
			value     规定输入字段的默认值
复制
修改placeholder属性的样式
 
input::-webkit-input-placeholder{ /*WebKit browsers*/
color: red;
}
 
input::-moz-input-placeholder{ /*Mozilla Firefox*/
color: red;
}
 
input::-ms-input-placeholder{ /*Internet Explorer*/ 
color: red;
}
复制

单选按钮

<input type="radio(单选按钮)" name="分组名（不用汉字）" 
                                         （同一组内单选，分组名需要相同才可实现单选）
(name表单中的名字,后台可以通过name这个属性找到这个表单) />
复制

复（多）选框

<input type="checkbox(复（多）选框)"  name="分组名（不用汉字）" 
                                                （同一组内多选，分组名不同）
(name表单中的名字,后台可以通过name这个属性找到这个表单)/>
复制

下拉菜单

<select name="" size="下拉列表大小（能看见几个列表项）"
 multiple="multiple" （设置列表框支持多选）>
<option selected="selected"或checked="checked" （设置选项为预选状态）>内容</option>
</select>
 
			<input list="courese名字" placeholder="请选择课程" />
 
			<datelist id="courese名字(同上)">
				<option value="内容1"></option>
				<option value="内容2"></option>
			</datelist>（部分浏览器可能不支持datelist属性.......）
复制

提交按钮：submit

<input type="submit" value="提交成功(默认为提交，指定文本框中的初始值)" 
复制

重置按钮：reset

<input type="reset" value="重新书写" （默认为重置） />
			value：（初始值）
复制

文件选择框

<input type="file" name="" id="" value="" />
（选择文件后并不能真正打开，只是将文件名回填到文件输入框内）
 
<input type="file"  name="file" onchange="imgPreview(this)" accept="image/*" />
复制

图像按钮

<input type="image" src="" /> //将一张图片作为按钮使用
复制

普通按钮

<input type="button">
复制

隐藏框

<input type="hidden">（隐藏框不显示在表单中，随用户表单一起提交给服务器）
复制

html5新增输入类型

            .number （属性：max（可输入最大值）/min（可输入最小值））
			.email
			.color
			.date
			.time
			.datetime
			.datetime-local
			.month
			.week
			.range（滑动控件）
			.search
			.tel
			.url
			.multiple 可以多选文件提交
			.date pickers
复制

（12）容器（盒子）标签 

<div></div>:容器（盒子），打组标签-用于页面模块划分，包裹和分割模块，相当于打组。
		
改变容器（内容的显示）位置：
<div align="内容的显示位置"></div>
		align：改变内容的显示位置（center居中/left居左/right居右 ）
		div{ margin：0 auto；（上下边距为0，水平居中）}
复制

4. 属性

语法： 属性名=“属性值” 

属性的作用：帮助标签实现效果，标签与属性之间，属性与属性之间都用空格隔开

可继承的属性：font-size font-faminly color
不可继承的样式：border,padding,margin,width,height
复制

（1）文本属性

通过css文本属性可以定义文本的外观（字体颜色、字号大小、文本加粗、倾斜......）

        字体颜色 color ：#666 ；
        字号大小 font-size：18px ；
        文本加粗（字重）font-weight：normal（等价于400）（常规字体）
/lighter（更细的-浏览器可能不支持）/bold（等价于700）（加粗）/bolder（更粗的-常用）；
        字体样式 font-style：normal（常规字体）/italic（倾斜）/oblique（更倾斜的-常用））；
        行高 line-height：27px （字体大小1.5倍起）；
单行文本在什么高度里上下垂直居中显示（设置文本行高等于父级标签高度，则文本对于标签垂直居中）
        字间距 letter-spacing：2px （默认为0，中文英文都适用）；
        词间距 word-spacing：4px （只适用于英文单词）；
        首行缩进 text-indent ：36px （字体大小两倍）；
        文本显示（水平-对齐）方式 text-align：left/center/right ；
（不止作用于文本，对行内块元素同样有效）（文本居中不能使用margin：0 auto）
        文本修饰 text-decoration ：overline 上划线/line-through 删除线
/underline 下划线/none取消文本修饰效果（取消超链接下划线）；
        英文大小写 text-transform：capitalize（开头首字母大写）
/uppercase（全部大写）/lowercase（全部小写）；
        文字字体 font-family：Ariel,“思源黑体”（各种字体之间必须使用英文状态下的逗号隔开；
中文字体需要加英文状态下的引号，当需要设置英文字体时，英文字体必须位于中文字体之前。）
（可以添加到通配符选择器里面——页面所有字体都确定了）；
 font：italic 700 20px "思源黑体"；
（总写，严格按照<font-style font-weight font-size font-family的顺序,
       其中字体大小和字体种类即最后两种不能省略不写）
复制


   vertical-align: baseline（默认底部基线对齐）/middle（垂直居中）/auto/top（顶部对齐）/bootom;元素的垂直对齐方式（只针对于行内元素或行内块元素，一般用于图片对齐文字）

clip: auto;设置元素的形状，元素被剪入这个形状中显示出来

  注意：

 若父盒子由图片撑开，图片下面会留空隙，因为图片或表单等行内块元素，他的底线会和父级盒子基线对齐
        a.解决办法：给img：vertical—align：middle/top，即不要基线对齐
        b.把图片转换为块级元素

5. 元素（标签）属性       

根据是否可以设置宽高，是否可以独立成行来进行区分
             （1）块级元素（默认独占一行，可以设置宽高，宽度默认是容器即父级100%的宽度，里面可以放置块级元素和行内元素，但文字类标签里不能放div标签）：

<h1>标题标签</h1>
<p>段落标签</p>
<ol>有序列表</ol>，<ul>无序列表</ul>，<dl>自定义列表</dl>
<div>div标签</div>
复制

            （2）行内元素（设置宽高无效，默认在行内逐个显示，尺寸是由内容决定的，行内元素只能容纳文本或其他行内元素）：

<a href="超链接地址">超链接标签</a>
<span>字节标签</span>
复制


           （3）行内块元素（在行内逐个进行展示，但是之间会有空白间隙，但可以设置宽高）：

<img src="图片路径" 图片标签 />
<input 输入框 />
复制

元素属性转换

   display：block（展示转化为-块级元素）
            inline（展示转化为-行内元素）
            inline-block（展示转化为-行内块元素）
            none（属性展示-隐藏）
复制

   
6.  重绘与回流(重排)的概念    

回流(重排): 当浏览器必须重新处理和绘制部分或全部页面时，回流就会发生
 
重绘: 不影响布局, 只是标签页面发生变化, 重新绘制
 
注意: 回流(重排)必引发重绘, 重绘不一定引发回流(重排)
复制


       

转载请注明出处或者链接地址：https://www.qianduange.cn//article/10340.html
标签
上一篇：HTML基本结构及基本标签
评论
还可以输入200
共0条数据,当前/页
首页 上一页 下一页 尾页
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！