01-HTML深入

1.1  浏览器的工作原理

         把一些标签解析成用户可视化的页面

1.2 HTML中的标签与元素

 

         在HTML中以<xx>开始，以</xx>结束，比如<html></html>等。

 

         标签和其内容统称为元素，比如：<xx>h5</xx>

 

        元素可以有属性，比如 <xx src=’xxx’>h5</xx>

1.3编码

数据以什么编码存入电脑，就必须以什么编码取出（解码）。

ASCLL码

计算机编码有UTF8、GB2312

1.4  HTML文档结构

<!--文档结构是HTML5.0这个版本-->
<!DOCTYPE HTML><html><!--head 页面的头部，一般用于设置一些参数给浏览器使用--><head></head><body></body>
</html>

1.4.1     Head

head一般用于设置一些信息给浏览器解析时使用。一般在head中通过meta标签来设置这些参数

<head><!--1.设置页面的解码--><meta charset="utf-8"/><!--2.让页面适应于PC、移动端--><meta name="viewport" content="width=device-width, initial-scale=1.0" /><!--3.seo搜索引擎优化--><mata name="keywords" content="博客园"></mata><mata name="description" content="米商城直营小米公司旗下所有产品，囊括小米手机系列小米Note 3、小米8、小米MIX 2S，红米手机系列红米5 Plus、红米6 Pro，智能硬件，配件及小米生活周边，同时提供小米客户服务及售后支持。"></mata><!--description，和上面的keywords一样，是用户不查看源代码看不到的，而且也是对于一个网页的简要内容概况。
         不同的是，keywords是由几个词语的组成的，而description则是完整的一句话。description一般不超过150个字符，描述内容要和页面内容相关。
         用法：<meta name=”Description” Content=”你网页的简述”>--><title>小米商城</title></head>

注：快速构建HTML结构的快捷键：! Tab

1.5   标签的分类

1.5.1 快标签（block tag）

【1】独占一行

【2】能设置宽高

无语义标签：没有特定的用途 => 什么都可以显示 => 用于包含别的标签 => 一般用于容器容纳别的标签。

有语义标签：有特定的用途

1.5.1.1 DIV

div 是无语义标签，一般用于页面架构性布局（DIV CSS）

<div id="top">aaaaa
</div>

 

1.5.1.2 H1-H6

有语义标签，专门用于显示标题的。

<!--2 标题--><h1>我是h1标题</h1><h2>我是h2标题</h2><h3>我是h3标题</h3><h4>我是h4标题</h4><h5>我是h5标题</h5><h6>我是h6标题</h6>

1.5.1.3 列表相关

ol/li 表示有序列表（ordered list），有语义标签。li一定是作为ol的子节点。

ul/li 表示无序列表（unordered list）有语义标签，li一定是作为ol的子节点。

<!--使用
ul-li
标签来完成。
ul-li
是没有前后顺序的信息列表。
li
是英文list item的缩写-->



<body>
<ul><li>完美生活</li><li>蓝莲花</li><li>一起摇摆</li>
</ul>
</body><!--ul>li(然后按下Tab键) 
含义: 生成一对ul标签, 然后在这对ul标签中再生成一对li标签--><ul><li></li>
</ul>
<!--ul>li*3(然后按下Tab键) 含义: 生成一对ul标签, 然后在这对ul标签中再生成3对li标签标签-->
<ul> 

   <li></li> 

   <li></li>

   <li></li> 

</ul>
<!--<ol>在网页中显示的默认样式一般为：每项<li>前都自带一个序号，序号默认从1开始--><body>
<ol><li>完美生活</li><li>蓝莲花</li><li>一起摇摆</li>
</ol>
</body>

dl/dt dd 表示定义列表，有语义标签，一般dd可以有多个

<!--定义列表--><!--<dl><dt></dt><dd></dd></dl>为常用标题 列表型标签。如没有对dl dt dd标签初始CSS样式，默认dd列表内容会一定缩进。--><dl>
<dt>列表标题</dt>
<dd>列表内容</dd>
<dd>列表内容</dd>
...
</dl><!--defined list--><dl><!--defined title--><dt>程序员鼓励师</dt><!--defined description--><dd>1、长相清新，声线甜美，微笑常在，人见人爱；</dd><dd>2、善于倾听，善不善沟通不重要，能忍受IT工程师死宅无法交流的性格；</dd><dd>3、耍不耍脾气不重要，要善于发现每一个程序暖男的天性，成功驯服；</dd><dd>4、了解互联网，懂科技，不然聊起来云里雾里，工程师会更受打击。</dd></dl>

1.5.1.4 Table

table是由行（row）构成、行是由单元格（table-cell）构成。

  • <tr>
    …
    </tr>
    ：表格的一行，所以有几对
    tr
     表格就有几行。
  • <td>
    …
    </td>
    ：表格的一个单元格，一行中包含几对
    <td>
    …
    </td>
    ，说明一行中就有几列。
  • <th>
    …
    </th>
    ：表格的头部的一个单元格，表格表头。
  • 表格中列的个数，取决于一行中数据单元格的个数。
  • table
    表格在没有添加
    css
    样式之前，在浏览器中显示是没有表格线的
  • 表头，也就是
    th
    标签中的文本默认为粗体并且居中显示 
    <!--快捷方法：table>tr*3>td*3--><!--4. table--><table border="1"  <!--添加边框-->><tr><td>aa</td><td>bb</td><td>cc</td></tr><tr><td>aa</td><td>bb</td><td>cc</td></tr><tr><td>aa</td><td>bb</td><td>cc</td></tr></table>
    1.5.1.4.1    单元格跨列

colspan一个单元格向右占多个列。

<table border="1"><tr><td>11</td><td colspan="2">22</td></tr><tr><td>aa</td><td>bb</td><td>cc</td><td>cc</td></tr></table>
            1.5.1.4.1    单元格跨行

rowspan单元格可以向下跨越多个行，被占的单元格向右挤。

<table border="1"><tr><td>11</td><td>22</td><td>33</td></tr><tr><td rowspan="2">aa</td><td>bb</td><td>cc</td></tr><tr><td>bb</td><td>cc</td></tr></table>

1.5.1.5 P

标签表示段落

<!--p 表示段落--><p>十年后的今天，世界经济复苏的势头远不如人们期许的那样强劲，信心的极端重要性并未减弱。然而，正如国际货币基金组织总裁拉加德所言，“笼罩世界经济的乌云正变得越来越重，最大和最重的乌云是信心的恶化”。恶化人们对世界经济发展前景信心的源头来自何方？只要随手翻一翻各国的报章，读一读那些有关美国同贸易伙伴大打贸易战忧心忡忡的报道，答案再清楚不过地摆在人们面前。</p><p>国际贸易是世界经济增长的重要一环，美国公开违反世贸规则，大范围挑起贸易争端，势必破坏全球贸易秩序，危害世界经济增长。世界银行上月初发布报告指出，全球关税广泛上升将会给全球贸易带来重大负面影响，对新兴市场和发展中经济体的影响尤为明显，特别是那些与美国贸易或金融市场关联度较高的经济体。权威人士预测，如果关税回到GATT/WTO（关贸总协定和世贸组织）之前的水平，世界经济将立即收缩2.5%，全球贸易量将削减60%以上，负面影响超过2008年国际金融危机。</p><!--错误的用法：不能再p标签中再放块标签--><p><div>test</div></p>

1.5.1.6 br

br表示换行，<br /> 我们把这种中间没有内容的标签称为开闭同体标签。

1.5.2  行内标签

【1】  在一行内显示

【2】  不能设置宽高，内容撑开宽高

1.5.2.1 span

span 是无语义行内标签，一般作为容器使用。

<span style="background: red;height: 100px;">Lorem ipsum dolor sit amet.</span>TEST

1.5.2.2  a

a 表示链接

1.5.2.2.1  路径相关

<!--链接到站外--><a href="http://www.baidu.com/">百度</a><!--站内链接--><!--绝对路径：从盘符开始的路径叫做绝对路径--><a href="C:\Users\Administrator\Desktop\index-gbk.html">index-gbk</a><!--相对路径--><!--当前目录：. --><a href="./index.html">index</a><a href="index.html">index</a>

相对路径 . 表示当前目录， .. 返回上一级目录。链接找资源时，一定先从当前目录开始找，所以当前目录可以省略。

1.5.2.2.3    锚点

通俗地说，锚点就是指在页面内做调整

<div id="top"></div><div><a href="#early-exp">早年经历</a><!--点击跳转到p标签的早年经历--><a href="#professional-exp">演艺经历</a><a href="#personal-life">个人生活</a><a href="#musics">音乐作品</a></div><p id="early-exp">早年经历Lorem</p><p id="professional-exp">演艺经历Lo</p><p id="personal-life">个人生活Lorem ipsum dolor </p><p id="musics">音乐作品Lorem </p><div><a href="#top">TOP</a><!--点击回到顶部--></div>

1.5.2.3 Img

专门用于显示图片。

1.5.2.3.1常用属性

alt：当图片加载失败时的提示文本

title：当鼠标悬停时的提示文本

<img alt="阿黛尔" title="阿黛尔" src="https://gss3.bdstatic.com/-Po3dSag_xI4khGkpoWK1HF6hhy/baike/w=268;g=0/sign=d6e1fdf69325bc312b5d069e66e4ea8c/6f061d950a7b020880e017d968d9f2d3572cc8d9.jpg" />

1.5.2.4 var/strong/em

var、strong、em 本意表示强调作用，有语义标签，强调的表现形式不一样，var/em 斜体强调，strong加粗强调。

<var>我是var</var>  <!--强调字体下斜-->
<strong>我是strong</strong>   <!--强调字体加粗-->
<em>我是em</em>   <!--强调字体倾斜-->

在实际开发过程中，一般来说都不用他们的本意，而是把他们降级成一般的无语义行内标签使用

 

本文转载于:猿2048➣https://www.mk2048.com/blog/blog.php?id=baaaaaa&title=01-HTML深入

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/370545.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

gitlab使用_使用 Docker 部署 Gitlab

gitlab使用_使用 Docker 部署 Gitlab

GitLab 是一个用于仓库管理系统的开源项目&#xff0c;使用Git作为代码管理工具&#xff0c;并在此基础上搭建起来的web服务&#xff0c;具有wiki和issue跟踪功能。GitLab是当前应用非常广泛的源代码管理系统。1. 安装docker引擎并启动2. 获取gitlab镜像包查看下载好的镜像3. 在…
阅读更多...
js--webSocket入门

js--webSocket入门

Websocket 1.websocket是什么&#xff1f; WebSocket是为解决客户端与服务端实时通信而产生的技术。其本质是先通过HTTP/HTTPS协议进行握手后创建一个用于交换数据的TCP连接&#xff0c; 此后服务端与客户端通过此TCP连接进行实时通信。 2.websocket的优点 以前我们实现推送技术…
阅读更多...
node.js继承

node.js继承

person.js module.exports function(){ 　　this.name "person"; 　　this.sleep function(){ 　　　　console.log("sleep in the night"); 　　} 　　this.eat function(){ 　　　　console.log(eat food); 　　}} student.js var util require(&qu…
阅读更多...
研究死锁–第5部分：使用显式锁定

研究死锁–第5部分：使用显式锁定

在我的上一个博客中&#xff0c;我研究了使用Java的传统synchronized关键字和锁排序来修复破碎的&#xff0c;死锁的余额转移示例代码。 但是&#xff0c;有一种替代方法称为显式锁定。 这里&#xff0c;将锁定机制称为显式而非隐式的想法是&#xff0c; 显式表示它不是Java语…
阅读更多...
mysql 经典入门教程_MySQL 经典入门教程

mysql 经典入门教程_MySQL 经典入门教程

MySQL 经典入门教程1 定义数据库中的表&#xff1a;一行叫一条记录。每一列叫一个属性&#xff0c;或一个字段。主键&#xff1a;表中的某个特殊字段&#xff0c;具有唯一的确定的值&#xff0c;可以根据该字段唯一的确定一条记录外键&#xff1a;表中的某个字段的值为另一张表…
阅读更多...
druid连接池初始化慢_7、SpringBoot -连接池(Durid)

druid连接池初始化慢_7、SpringBoot -连接池(Durid)

一导入相关核心包<dependencies>二 在application.ymlspring三、配置Druid Datasource(可选)Configuration五、监控访问 http://localhost:8080/druid&#xff0c; 使用上面配置的账号密码。四、自动配置原理源代码Configuration说明DataSourceProperties 配置相关 首先找…
阅读更多...
负载均衡与反向代理

负载均衡与反向代理

如果用域名 映射多了Ip &#xff1b; 外网应该用来实现 GSLB 1 轮询pstream nginxDemo { server 127.0.0.1:8081; server 127.0.0.1:8082; } 最少链接web请求会被转发到连接数最少的服务器上。 upstream nginxDemo { least_conn; server 127.0.…
阅读更多...
使用工厂方法模式设计最佳实践

使用工厂方法模式设计最佳实践

在前面的“设计模式”示例中&#xff0c;我们解释了当今常用的“工厂”模式。 在本节中&#xff0c;我们将了解具有更多抽象的更高级的解决方案。 该模式称为工厂方法设计模式。 定义&#xff1a; Factory方法模式提供了一种用于创建对象的方法&#xff0c;但是将对象创建委托…
阅读更多...
偏导数

偏导数

引入 一元函数导数&#xff1a; 在一元函数中&#xff0c;我们已经知道导数就是函数的变化率&#xff08;对于一个一元函数&#xff0c;x增大了多少&#xff0c;y增大了多少&#xff0c;这个就是变化率&#xff09;。对于二元函数我们同样要研究它的“变化率”。在xOy平面内&am…
阅读更多...
qt绘制一圈圆_Qt绘制圆

qt绘制一圈圆_Qt绘制圆

最近开始折腾Qt了&#xff0c;手头上的一个项目需要用到Qt来绘制一些简单图像。记录下Qt绘制圆的过程&#xff1a;对于以A为圆心&#xff0c;半径为R的圆&#xff0c;外部有一个外切的正方形&#xff0c;正方形上有B点。如下图所示&#xff1a;对于void QPainter::drawArc(int …
阅读更多...
前端基础之HTML

前端基础之HTML

HTML介绍 Web服务本质 import socketsk socket.socket()sk.bind(("127.0.0.1", 8080)) sk.listen(5)while True:conn, addr sk.accept()data conn.recv(8096)conn.send(b"HTTP/1.1 200 OK\r\n\r\n")conn.secd(b"<h1>Hello world!</h1&g…
阅读更多...
指令引用了 内存 该内存不能为read 一直弹窗_【翻译】使用Rust测试ARM和X86内存模型

指令引用了 内存 该内存不能为read 一直弹窗_【翻译】使用Rust测试ARM和X86内存模型

原文标题: The Story of Tail Call Optimizations in Rust 原文标题: Examining ARM vs X86 Memory Models with Rust原文链接: https://www.nickwilcox.com/blog/arm_vs_x86_memory_model/公众号&#xff1a; Rust碎碎念苹果公司最近宣布&#xff0c;他们将要把笔记本和桌面电…
阅读更多...
Docker应用二:docker常用命令介绍

Docker应用二:docker常用命令介绍

Docker常用命令使用介绍 docker中常用的命令: 1、docker search image_name:搜查镜像 2、docker pull image_name:从镜像库中拉去镜像 3、docker run image_name:运行容器 --restartalways:容器退出后重新启动 --name:自定容器名字 --d:后台运行容器 --i:交互模式 --t:打开一个…
阅读更多...
关于Ubuntu使用笔记

关于Ubuntu使用笔记

Ubuntu vm tools 安装 sudo apt install open-vm-tools-desktop 在安装程序时Ubuntu会将安装目录锁定&#xff0c;安装结束后会解除锁定&#xff0c;中断安装后无法再安装其他软件解决方案 E: Could not get lock /var/lib/dpkg/lock - open (11: Resource temporarily unavail…
阅读更多...
具有可执行Tomcat的独立Web应用程序

具有可执行Tomcat的独立Web应用程序

在部署应用程序时&#xff0c;简单性是最大的优势。 您将了解到&#xff0c;尤其是在项目发展且需要在环境中进行某些更改时。 将整个应用程序打包到一个独立且自足的JAR中似乎是个好主意&#xff0c;尤其是与在目标环境中安装和升级Tomcat相比。 过去&#xff0c;我通常将Tomc…
阅读更多...
css网页中设置背景图片的方法详解

css网页中设置背景图片的方法详解

在css代码中设置背景图片的方法&#xff0c;包括背景图片、背景重复、背景固定、背景定位等 用css设置网页中的背景图片&#xff0c;主要有如下几个属性&#xff1a; 1&#xff0c;背景颜色 {">说明&#xff1a;参数取值和颜色属性一样 注意&#xff1a;在HTML当中&am…
阅读更多...
node-sass安装不成功的问题

node-sass安装不成功的问题

SASS_BINARY_SITEhttps://npm.taobao.org/mirrors/node-sass/ npm install node-sass 简单粗暴的执行上述的命令。转载于:https://www.cnblogs.com/czaiz/p/6918114.html
阅读更多...
npm升级依赖包_Taro跨端开发之依赖管理

npm升级依赖包_Taro跨端开发之依赖管理

昨天跑的好好项目,今天跑不起来我们在开发周期比较长的前端项目的时候,必然会遇到依赖管理的问题. 我们在开发项目的时候,我们用了大量的三方库.这些三方的依赖库时不时的会更新自己的代码.第三方依赖库的代码更新会很容易造成代码运行的不稳定, 比如昨天还跑的好好的项目,另一…
阅读更多...
QOTD：Java线程与Java堆空间

QOTD：Java线程与Java堆空间

以下问题很常见&#xff0c;并且与OutOfMemoryError有关&#xff1a;在JVM线程创建过程和JVM线程容量期间无法创建新的本机线程问题。 这也是我向新技术候选人&#xff08;高级职位&#xff09;提出的典型面试问题。 我建议您在查看答案之前尝试提供自己的答复。 题&#xff1…
阅读更多...
sql查询重复项

sql查询重复项

select * from [表A] where id in (select id from [表A] group by id having count(id) >1 )转载于:https://www.cnblogs.com/wuyujie/p/7885017.html
阅读更多...
最新文章

Copyright @ 2022~2023