html笔记_html目录与内容联动-优快云博客

本文链接：https://blog.youkuaiyun.com/liyuali2012/article/details/78468526

本文介绍了HTML的基础知识，包括常用标签的使用方法，如标题、段落、图片等，并讲解了CSS选择器的基本概念，帮助初学者快速入门。

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

刚开始学html，虽然有android页面搭建基础，前端页面大同小异，但学一种新语言搭页面，就会有一种：道理都懂，却施展不了手脚的感觉。因为看到一个样式的时候，脑子里没有原材料、或者说总觉得自己知道的原材料太少，现有方法并不是最佳实现方式。那就恶补下基础咯，这里都是随便给自己记得一些提示性笔记，看的慕课网的教程。有时间的可以去看看。

标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、
三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。
<h1>是最高的等级。

<html> 与 </html> 之间的文本描述网页
<body> 与 </body> 之间的文本是可见的页面内容
<h1> 与 </h1> 之间的文本被显示为标题
<p> 与 </p> 之间的文本被显示为段落

下面这些标签可用在 head 部分：

<head>
    <title>...</title>
    <meta>
    <link>
    <style>...</style>
    <script>...</script>
</head>

1. 有了段落又有了标题，现在如果想在一段话中特别强调某几个文字，
这时候就可以用到<em>或<strong>标签。
   但两者在强调的语气上有区别:
<em> 表示强调，<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示，
<strong> 用粗体表示。两个标签相比，目前国内前端程序员更喜欢使用<strong>表示强调
<em>和<strong>标签是为了强调一段话中的关键字时使用，它们的语义是强调。

2.  `<span>标签是没有语义的，它的作用就是为了设置单独的样式用的。`

3. `在需要加回车换行的地方加入<br />`
4. 在 html 中是忽略回车和空格的，你输入的再多回车和空格也是显示不出来的。
`要想输入空格，必须写入&nbsp;。`
5. 在网页制作过程过中，可以把一些独立的逻辑部分划分出来，
放在一个<div>标签中，这个<div>标签的作用就相当于一个容器。
什么是逻辑部分？它是页面上相互关联的一组元素。如网页中的独立的栏目版块，
就是一个典型的逻辑部分。如下图所示：图中用红色边框标出的部分就是一个逻辑部分，
就可以使用<div>标签作为容器。

6.在网页的制作中为使网页炫丽美观，肯定是缺少不了图片，可以使用<img>标签来插入图片。
<img src = "myimage.gif" alt = "My Image" title = "My Image" />

1、src：标识图像的位置；

2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；

3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；

4、图像可以是GIF，PNG，JPEG格式的图像文件。

使用<a>标签可实现超链接，它在网页制作中可以说是无处不在，只要有链接的地方，就会有这个标签。
<a  href="http://www.imooc.com"  title="点击进入慕课网">click here!</a>

嵌入式css样式必须写在<style></style>之间，并且一般情况下嵌入式css样式写在<head></head>之间。

选择器

标签选择器

标签选择器其实就是html代码中的标签。如<html>、<body>、<h1>、<p>、<img>。例如下面代码：

p{font-size:12px;line-height:1.6em;}

类选择器

类选择器在css样式编码中是最常用到的

语法：
.类选器名称{css样式代码;}
注意：

1、英文圆点开头

2、其中类选器名称可以任意起名（但不要起中文噢）

ID选择器

在很多方面，ID选择器都类似于类选择符，但也有一些重要的区别：

1、为标签设置id="ID名称"，而不是class="类名称"。

2、ID选择符的前面是井号（#）号，而不是英文圆点（.）。

相同点：可以应用于任何元素
不同点：
1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，
而且仅一次。而类选择器可以使用多次。
2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，
但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。

子选择器

还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。
如右侧代码编辑器中的代码：

.food>li{border:1px solid red;}
这行代码会使class名为food下的子元素li（水果、蔬菜）加入红色实线边框。

包含选择器

包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码：

.first  span{color:red;}
这行代码会使第一段文字内容中的“胆小如鼠”字体颜色变为红色。

请注意这个选择器与子选择器的区别，子选择器（child selector）仅是指它的直接后代，
或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。
后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。

总结：>作用于元素的第一代后代，空格作用于元素的所有后代。

通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素，
如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：

* {color:red;}

伪类选择符

更有趣的是伪类选择符，为什么叫做伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，
比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：

a:hover{color:red;}
上面一行代码就是为 a 标签鼠标滑过的状态设置字体颜色变红。这样就会使第一段文字内容中的“胆小如鼠”
文字加入鼠标滑过字体颜色变为红色特效。

关于伪选择符：

    关于伪类选择符，到目前为止，可以兼容所有浏鉴器的“伪类选择符”就是 a 标签上使用 :hover 了
其实 :hover 可以放在任意的标签上，比如说 p:hover，但是它们的兼容性也是很不好的，
所以现在比较常用的还是 a:hover 的组合。

标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码：

p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
注意：还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。