HTML基础知识详解-优快云博客

本文链接：https://blog.youkuaiyun.com/TDFSFSF/article/details/101480112

这篇博客介绍了HTML的基础知识，包括开发工具如Chrome、Sublime等，浏览器内核如Trident、WebKit等，以及Web标准的重要性。此外，详细讲解了HTML的结构、锚点定位、base标签、特殊字符、路径和表格的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、开发工具
chrome谷歌
sublime编译器 DW Huilder WebStorm VS code
Photoshop ps软件：熟练的切图，设计海报做电商和UI
浏览器是网页显示运行的平台常用的：firfox chrome 微软的IE浏览器和Edge浏览器、opera浏览器、safari浏览器等
网页主要由文字、图像和超连接等元素构成，还包含音频、视频、flash等

2、浏览器的内核渲染引擎或JS引擎
Trident IE内核
Gecko 火狐
webkit safari浏览器
chromium\blink 谷歌
Presto opera浏览器
移动端使用率最高的就是；webkit内核
ios使用safari或者是trident
3、web的标准
web标准的好处
让weeb的发展前景更广阔
内容能被更广泛的设备访问
更容易被搜寻引擎搜索
降低网站流量的费用
使网站已于哦维护
提高页面浏览速度
web标准的构成（w3c和其他标准组织指定的集合）
结构Structure
表现Presentation
行为behavior

    结构标准：结构用于对网页元素进行整理和分类，html
    表现标准：表现用于设置网页元素的版式，css
    行为标准：行为是指网页模型的定义及交互的编写，JavaScript

课堂练习
    1、关于web标准下列说法正确的是：C
        A html决定页面的行为，css决定页面的样式、js决定页面的结构
        B html决定页面的样式，css决定页面的结构、js决定页面的行为
        C html决定页面的结构，css决定页面的样式、js决定页面的行为
        D 以上都不正确
    2、web标准里面规定三层分离不包括哪部分？D
        A html
        B CSS
        C JavaScript
        D PHP
    3、关于web标准下列说法正确的是B
        A html相当于人的动作行为，css相当于人的穿着打扮，JavaScript相当于人的骨架结构
        B html相当于人的骨架结构，css相当于人的穿着打扮，JavaScript相当于人的动作行为
        C html相当于人的穿着打扮，css相当于人的骨架结构，JavaScript相当于人的动作行为
        D html相当于人的骨架结构，css相当于人的动作行为，JavaScript相当于人的穿着打扮

4、html
html 超文本标记语言
html是一种标记语言，不是编程语言
html骨架格式

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8" />
            <title>test</title>
        </head>
        <body>
            
        </body>
    </html>

    charset="UTF-8"设置字符集
        gb2312简体中文
        BIG5繁体中午呢
        GBK包括中文字符
    <!DOCTYPE html>声明文档类型
html的标签分类  
    双标签 <标签名>内容</标签名> <h1>hello world</h1>
    单标签（空标签） </标签名>   <br/>
html的常用标签
    排版标签：主要和css搭配使用
    标题标签：<h1>、<h2>、<h3>、<h4>、<h5>、<h6>
    段落标签：<p>文本内容</p>
    水平线标签：<hr>
    换行标签：<br>
    文本格式化标签：加粗<b></b><strong></strong>、文字斜体<i></i><em></em>、加删除线<s></s><del></del>、加下划线<u></u><ins></ins>(b i s u只有使用没有强调的意思，strong em del ins语义更强烈)
    图像标签：<img src="图片上传路径" alt="当图片加载不出来时显示的文字" title="鼠标悬停时现实的文字"/>
    链接标签：<a href="跳转目标" target="目标窗口跳出的方式"></a>
    注释标签：需要在html文档中添加一些便于阅读但是不需要显示在页面的文字<!-- 注释语句 -->
    div span标签：div span是没有语义的，是网页布局主要的2个盒子
    列表标签：
        容器里面装载文字或图标的一种形式，叫做列表
        无序列表ul(无序列表的各项之间没有顺序级别之分)
            <ul>
                <li></li>
            </ul>
            注意：
            <ul></ul>中只可以嵌套<li></li>，直接子啊ul标签中输入其他表亲啊或者文字的做法是不被允许的
            <li>与</li>之间相当于一个容器，可以容纳所有的元素
            无序列表会带有自己的样式属性
        有序列表ol(有顺序，123456...)
            <ol>
                <li></li>
            </ol>
        自定义列表:用于对属于或名词进行解释和描述
            <dl>
                <dt></dt>
                <dd></dd>
            </dl>
htnl标签的语义化
    原因：
        方便代码的维护和阅读
        同时让浏览器或网络爬虫很好的解析，从而更好的分析其中的内容
        使用语义化标签会更好的搜索引擎
    核心：合适的地方给一个合理的标签

课堂练习
    1、请问下面哪个标签是错误的 C
        A <head></head><body></body>
        B <strong><div></div></strong>
        C <head><title></head></title>
        D <body><div></div></body>
    2、新闻页面
        文件夹中的test1.html
    3、关于标签下列说法正确的是 B
        A P1是段落标签
        B H1是标题标签
        C Hr是换行标签
        D Br是一条直线
    4、关于标签下列说法不正确的是 B
        A H标签有6个等级分别是<h1>、<h2>、<h3>、<h4>、<h5>、<h6>
        B h1和h6文字从小到大
        C p标签一行只能放一个
        D P是标签会给文字加上段落的语义
    5、四大名著练习
    <!DOCTYPE html>
	<html lang="en">
	<head>
	    <meta charset="UTF-8" />
	    <title>中国四大名著</title>
	</head>
	<body>
	    <h1>中国四大名著</h1>
	    <ul>
	        <li>
	            <h3>《西游记》</h3>
	            <img src="image/西游记.jpg" height="75" width="75" alt="" /><br />
	            <span>《西游记》改编自明代小说家吴承恩同名文学古典名著。该剧由中国国际电视总公司出品，杨洁执导，戴英禄，杨洁，邹忆青共同编剧，六小龄童、徐少华、迟重瑞、汪粤、马德华、崔景富、闫怀礼、刘大刚等主演的一部41集（86版25集+续集16集）古装神话剧。[1]该剧讲述的是孙悟空、猪八戒、沙僧辅保大唐高僧玄奘去西天取经，师徒四人一路抢滩涉险，降妖伏怪，历经八十一难，取回真经，终修正果的故事。1986年春节该剧一经播出，轰动全国，老少皆宜，获得了极高评价，造就了89.4%的收视率神话，至今仍是寒暑假被重播最多的电视剧，重播次数超过3000次，依然百看不厌，成为一部公认的无法超越的经典。</span>
	        </li>
	        <li>
	            <h2>《水浒传》</h2>
	            <img src="image/水浒传.jpg" height="75" width="75" alt="" /><br />
	            <span>《水浒传》是以白话文写成的章回小说，列为中国古典四大文学名著之一，六才子书之一。其内容讲述北宋山东梁山泊以宋江为首的绿林好汉，由被逼落草，发展壮大，直至受到朝廷招安，东征西讨的历程。作者历来有争议，一般认为是施耐庵所著，而罗贯中则做了整理，金圣叹删修为七十回本。</span>
	        </li>
	        <li>
	            <h3>《三国演义》</h3>
	            <img src="image/三国演义.jpg" height="75" width="75" alt="" /><br />
	            <span>《三国演义》（全名为《三国志通俗演义》，又称《三国志传》）是中国古典四大名著之一，亦是中国第一部长篇历史章回小说，作者一般被认为是元末明初的罗贯中。 该书描写了从东汉末年到西晋初年之间近百年的历史风云，反映了三国时代的政治军事斗争以及各类社会矛盾的渗透与转化。其虚实结合，曲尽其妙，是四大名著中唯一根据历史事实改编的小说，被许多人误以为该书内容就是中国三国时期的正史</span>
	        </li>
	        <li>
	            <h2>《红楼梦》</h2>
	            <img src="image/红楼梦.jpg" height="75" width="75" alt="" /><br />
	            <span>《红楼梦》（又名《石头记》《金玉缘》），中国古典四大名著之首，清代作家曹雪芹创作的章回体长篇小说，它也是一部具有世界影响力的人情小说作品，举世公认的中国古典小说巅峰之作，中国封建社会的百科全书，传统文化的集大成者。 小说以贾、史、王、薛四大家族的兴衰为背景，以贾府的家庭琐事、闺阁闲情为脉络，以贾宝玉、林黛玉、薛宝钗的爱情婚姻故事为主线，刻画了以贾宝玉和金陵十二钗为中心的正邪两赋有情人的人性美和悲剧美</span>
	        </li>
	    </ul>
	</body>
	</html>

5、锚点定位

 <a href="#live">个人生活</a>

 <h3 id="live">个人生活</h3>

6、base标签
可以设置整体的链接的打开状态
在header中添加
7、特殊字符

&nbsp;空格
&lt;小于号
&gt;大于号
&amp;和号
&yen;人民币
&copy;版权
&reg;注册商标
&deg;摄氏度
&plusmn;正负号
&times;乘号
&divide;除号
&sup2;平方2
&sup3;立方3

8、路径
相对路径
图像文件和html文件位于同一个文件夹，只需要输入图像文件的名称即可
图像文件位于html文件的下一级文件，输入文件夹和文件名，之间用/隔开
图像文件位于html文件的下一级文件，在按文件之前加入…/，如果是上两级，就加上两个…/
绝对路径
完整的网络地址 eg：C:\Users\Administrator\Desktop\test
9、表格table
用来处理、显示格式数据
表格提供了html中定义表格式数据的方法
表格中由行中的单元格完成
表格中没有列元素，列的个数取决于单元格的个数
表格不要纠结于外观

<table border="" align="center/left/right表格在网页中的对齐方式" height="" width="" cellpacing="设置单元格与但与个边框之间的空白距" cellpadding="设置单元格与单元格边框之间的空白间距">
	<tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
    </tr>
</table>

table用于定义一个表格
tr用于定义表格中的一行
td用于定义表格中的单元格，一个tr中有多少个td就是有多少列

表头标签，一般在表格的第一行或者第一列，用<th></th>代替<tr></tr>
表格标题<caption></caption>
跨行居中rowsapn     跨列居中colspan

基础HTML1