2021-07-26

最新推荐文章于 2024-09-14 15:26:51 发布

m0_46579547

最新推荐文章于 2024-09-14 15:26:51 发布

阅读量111

点赞数

分类专栏： html基础文章标签： html

本文链接：https://blog.csdn.net/m0_46579547/article/details/119115962

版权

html基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML基础1

HTML初识
1、HTML：
超文本标记语言（Hyper Text Markup Language）,1991年出现了HTML,而现在所说的HTML一般指1999年的HTML4.01版本，HTML5本身并非技术，而是标准。国内通常所说的HTML5实际上是html与css3及javaScript和api的一个组合。

2、蓝湖
高效的产品设计协作平台。在开发阶段，UI会在蓝湖建立UI项目，加入项目，通过UI图进行页面布局、页面文字、颜色、图片、展示效果。

3、SEO
搜索引擎优化

4、五大主流浏览器
IE、Firefox、Chrome、safari、Opera

5、浏览器结构
浏览器的shell外壳 + 浏览器内壳
外壳shell:用户界面、浏览器引擎、网络、UI后端、数据持久化存储
内壳（内核）：渲染引擎、JS引擎

7、渲染浏览器的流程
解析HTML为DOM树-----渲染树的结构-----布局渲染树-----绘制渲染树

8、web标准
web标准的制定者是万维网联盟（W3C）
web标准的好处：
（1）让web发展前景更广阔
（2）让内容能被更广泛的设备访问
（3）更容易被搜索引擎搜索
（4）降低网站流量费用
（5）使网站更易于维护
（6）提高网页浏览速度

9、标准构成
主要包括：结构（structure）-----JS、表现（presentation）-----CSS、行为（behavior）-----HTML

HTML常用标签
1、HTML骨架

<!DOCTYPE html>
<!-- 声明html5版本 DOCTYPE doctype Doctype-->
<html lang="en">
<!-- html根元素  lang网页英文 -->
<head>
    <!-- 头部标签 网页标签 配置项 -->
    <meta charset="UTF-8">
    <!-- charset字符编码 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>Document</title>
    <!-- 标题 -->
</head>
<body>
        <!-- body 和 head 并列关系（兄弟关系）
        head 和 title 嵌套关系（父子关系） -->
        创建HTML页面骨架
        <!-- ！+ 回车 -->
        <!-- html:5 + 回车 -->
        标签分类：
        <!-- 单标签：meta -->
        <!-- 双标签：html head body -->
        标签关系：
        <!-- 并列关系：（兄弟关系） -->
        <!-- 嵌套关系：（父子关系） -->

</body>
</html>

2、标题标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题标签</title>
</head>
<body>
<!-- h${新闻标题$}*6 -->
    <h1>新闻标题</h1>
    <h2>新闻标题</h2>
    <h3>新闻标题</h3>
    <h4>新闻标题</h4>
    <h5>新闻标题</h5>
    <h6>新闻标题</h6>
</body>
</html>

3、段落标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>段落标签</title>
</head>
<body>
    <!-- paragraph  p标签：段落标签 -->
    <p>
        1个月前 - 6月11日,由牛客网主办的2021春季校招白皮书暨新品发布会(北京场)(以下简称:发布会)在北京富力万丽酒店盛大举办.发布会以“萌新就位·优聘YouPick”为主题,邀请...
        牛客企业服务号 - weixin.qq.com - 2021-06-16
    </p>

    <p>
       	
        海投网是由武汉鸣鸾信息科技有限公司开发和运营的求职服务平台，专注于应届毕业生求职领域，致力于打造综合的大学生求职搜索引擎。海投网从最初的校园宣讲会查...
        简介 主打品牌 服务版块 移动端扩展
    </p>
    <!-- 段落前后一行空行  自适应浏览器窗口大小 -->
</body>
</html>

4、水平线、横线标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水平线、换行</title>
</head>
<body>
    <p>
        许多年以前有一位皇帝，他非常喜欢穿好看的新衣服。他为了要穿得漂亮，把所有的钱都花到衣服上去了，他一点也不关心他的军队，也不喜欢去看戏。除非是为了炫耀一下新衣服，他也不喜欢乘着马车逛公园。他每天每个钟头要换一套新衣服。人们提到皇帝时总是说：“皇上在会议室里。”但是人们一提到他时，总是说：“皇上在更衣室里。<br> <hr> 在他住的那个大城市里，生活很轻松，很愉快。每天有许多外国人到来。有一天来了两个骗子。他们说他们是织工。他们说，他们能织出谁也想象不到的最美丽的布。这种布的色彩和图案不仅是非常好看，而且用它缝出来的衣服还有一种奇异的作用，那就是凡是不称职的人或者愚蠢的人，都看不见这衣服。
    </p>
</body>
</html>

5、div、span标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        块级标签：div h1-h6 p hr
    </div>
    <span>行内标签:span 文本格式化标签</span>
    <span>行内标签</span>
    <!-- 
    （1）块级标签
    1、独占一行
    2、可设宽高
    3、可设margin  padding
    (2)行内标签
    1、不独占一行
    2、不可设宽高
    3、只能设置margin 左右
    -->
</body>
</html>

6、图片标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <img src="https://img2.baidu.com/it/u=2788559285,3122810374&fm=26&fmt=auto&gp=0.jpg" alt="我是图片" title="哆啦A梦" width="100px" height="100px">
    
    <img src="./duola.webp" alt="我是图片" title="哆啦A梦" width="100px" height="100px">
    <!-- 1、绝对路径：网络路径、盘符
    2、相对路径：相对于当前文件夹的路径
     --> 
     <!-- alt--当图片链接失效时，补充说明图片 -->
     <!-- src 规定图片地址 -->

    
</body>
</html>

*7、文本格式化标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本格式化</title>
</head>
<body>
    <p>你好你好你好1</p>
    <!-- i 斜体 -->
    <i>你好你好你好2</i>
    <!-- b 加粗 -->
    <b>你好你好你好3</b>
    <!-- s 删除下划线 -->
    <s>你好你好你好4</s>
    <!-- u 下划线 -->
    <u>你好你好你好5</u>
    <strong>你好你好你好6</strong>
    <em>你好你好你好7</em>
    <del>你好你好你好8</del>
    <ins>你好你好你好9</ins>
</body>
</html>

8、链接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>链接标签</title>
</head>
<body>
    <a href="https://www.baidu.com/">百度一下，你就知道</a> <br>
    <a href="https://y.qq.com/?ADTAG=myqq#type=index" title="畅享QQ音乐">
    <img src="./duola.webp" alt="image" style="width: 100px; height: 100px;"></a> <br>
    <!-- <a href="https://y.qq.com/?ADTAG=myqq#type=index" target="blank">畅享QQ音乐</a> -->
</body>
</html>