学期项目之HTML5重要理解点小结

最新推荐文章于 2025-07-18 12:17:54 发布

原创最新推荐文章于 2025-07-18 12:17:54 发布 · 558 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html5

HTML5 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了HTML与CSS的关键特性及使用技巧，包括元素定位、字体设置、伪类元素运用等，帮助读者深入掌握前端开发基础。

1.HTML定位元素

top, left, bottom, right只有在定位元素时才会起作用(即需要指定position)。

left指定元素元素距父级左边的距离，其它依此说明。

①. position设置为relative，则元素的偏移可以认为是基于对象的margin进行的。(top,left,bottom,right)

②.当元素的position设置为absolute后，其到底以谁为对象进行偏移呢？这里分为两种情况：
（1）当元素的父对象(或曾祖父，只要是父级对象)parent也设置了position属性，且position的属性值为absolute或者relative时，也就是说，不是默认值的情况，此时sub1按照这个parent来进行定位。
（2）如果元素不存在一个有着position属性的父对象，那么那就会以body为定位对象，按照浏览器的窗口进行定位，这个比较容易理解。

③. fixed总是以body为定位对象的，按照浏览器的窗口进行定位,即使拖动滚动条，他的位置也是不会改变的。
④. static，position的默认值，一般不设置position属性时，会按照正常的文档流进行排列。

(转)

2.CSS font-family属性
假如：font-family:"Times New Roman",Georgia,Serif;
解释：当客户终端能识别第一种字体时使用第一种字体，不能识别第一种而能识别第二种用第二种，前两个都能识别而第三个能识别用第三种，都不能识别用默认字体。

3.伪类元素
最常用的就是定义链接的伪类
:link：未被访问状态
:visited：已被访问状态
:hover：鼠标悬停状态
:active：活动状态
还有一些不被常使用的伪类，有:focus，:first-child，:lang等。
:focus：选择器用于选取获得焦点的元素。
:first-child：某个标签的第一个元素，例：li
:last-child：某个标签的最后一个元素。
但CSS里不光有伪类，还有伪元素，比如：:first-letter，:first-line，:before和:after。
其它伪元素暂且不表，单说:after伪元素。
after顾名思义是在元素后面的意思，实质是在元素之后添加内容。
这个伪元素允许制作人员在元素内容的最后面插入生成内容，需要和content属性一起使用，设置在对象后发生的内容。默认地，这个伪元素是inline行内元素，不过可以使用属性 display 改变这一点。

提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
提示：伪类名称对大小写不敏感。

①: before和:after简例介绍
:before和:after的作用就是在指定的元素内容（而不是元素本身）之前或者之后插入一个包含content属性指定内容的行内元素，最基本的用法如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title></title>
    <style>
        #pid:before {
            content: "^^";
            color: red;
        }
        #pid:after {
            content: "!";
            color: red;
        }
    </style>
</head>
<body>
    <p id="pid">welcome to my home</p>
</body>
</html>

这段代码会在#pid元素内容之前插入一个'^^'，以及在内容之后添加一个'!'，插入的行内元素是作为#pid的子元素，效果如下:

如果没有content属性，伪类元素将没有任何作用。

但是可以指定content为空，插入的内容默认是一个行内元素，并且在HTML源代码中无法看到，这就是为什么称之为伪类元素的理由，所以也就无法通过DOM对其进行操作。
除了插入文字内容之外，还可以插入图片等。

②: before和:after惊人用法
在这里展示一个常用的场景，很多人写过如下清除浮动的代码：

<div id="container">
    <div class="content-left">this is left content.</div>
    <div class="content-right">this is right content.</div>
    <div class="clear"></div>
</div>

对应的css代码如下：

.content-left{
    float: left;
    width: 150px;
     font-weight:bold;">red;
}
.content-right{
    float: right;
    width: 450px;
    font-weight:bold;">yellow;
}
.clear{
    clear: both;
}

为了清除上面的浮动，多添加了一个<div>元素，并给此<div>元素添加了clear样式，这种做法破坏了HTML5的语义化原则，因此应对css样式进行修改，添加如下代码：

.clearfix{
     zoom: 1;
}
.clearfix:before,
.clearfix:after{
    display: table;
    content: "";
}
.clearfix:after{
    clear: both;
}

(细节解释：css中的zoom属性可以让网页实现IE7中的放大缩小功能。
zoom：1就是和原来一样大小)
只要在父容器上应用clearfix这个类即可实现清除浮动。。。

(转)

4.z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。(例如图片的显示优先级)

5.background 是用于在一个声明中设置所有背景属性的一个简写属性。
可能的值：
background-color
background-image
background-repeat
background-attachment
background-position

background : background-color || background-image || background-repeat || background-attachment || background-position

分别代表
背景属性：背景颜色背景图片背景是否重复背景是否随浏览器滚动背景水平位置背景垂直位置

例如
background : transparent none repeat scroll 0% 0%

上面CSS的解释
transparent 表示透明无颜色，是background-color的默认值
none 表示没有设置背景图片
repeat 表示图片重复
scroll 表示背景图片随浏览器下拉而滚动
0% 水平位置在x0
0% 垂直位置在y0

2017/06/29复习点

统一资源定位符(URL)

文本编辑器，必须使用.html和.htm扩展名保存文件

结构标记：
<!DOCTYPE HTML>
<HTML>
<HEAD>
<BODY>

<!DOCTYPE HTML> <!DOCTYPE>标记向浏览器提供有关HTML版本的指示信息。

<HTML> </HTML> 指定文档是HTML文档，指定网页的开始和结束，是包含网页全部内容的容器标记。

容器标记：是需要闭合的标记，有被称为成对标记，并括起其中的全部内容。
空标记：不需要闭合的标记，没有内容只有属性。

<HEAD> 描述文档的报头，报头是HTML文档的第一部分，在其中可定义文档的全局设置，例如网页标题，文件格式，最后修改日期等。

<BODY> 设置HTML文档内容的边界。在浏览器显示时，用户可以看到其开始标记和结束标记括起的内容。

删掉<TITLE>之后的，则以文档的名称作为默认标题。

http-equiv属性获取用于将content中提供的值绑定到HTTP响应报头的信息。
refresh指定需要刷新页面

<BASE>标记指定页面中所有相关链接的基本URL或地址。该标记的href属性指定目录的绝对路径(href="d:/images/")，便可直接访问该路径的所有资源。

STYLE的media属性指定为何种设备或媒体时所使用的CSS样式，type指定样式表的类型，text/css指定样式表中的内容为CSS。

<LINK>标记用于建立网站中当前文档与其他文档之间的关系。比如指定外部资源即当前文档中所用的样式表。它没有与其关联的可视化外观和效果。
它的href属性指定所链接文档的名称或URL，rel指定当前文档与被链接文档之间的关系，例如stylesheet指定被链接文档为当前文档的外部样式表。另，hreflang指定所链接文档中使用的文本语言，media指定为何种设备或媒体时显示所链接的的文档。

<SCRIPT>标记指定与文档关联的客户端脚本。
其async指定异步执行脚本，charset指定外部脚本文件的字符编码，defer指定将网页完成解析后执行脚本，src指定外部脚本文件的URL，

type指定脚本的类型，如text/javascript。
prompt(A, B)函数指定输入框，第一个参数提示句，第二个参数输入框的默认值。
alert()以消息框形式显示消息。

<NOSCRIPT>标记在已禁用脚本的浏览器上或在不支持客户端脚本的浏览器上指定替换内容。

HTML允许有6层标头，<h1>用于定义最高层标头，级别最高，<h6>用于定义最低层标头，级别最高低。标头用于指定网页上跟随在其后的内容的主题。不同的标头标记指定不同级别的标头。

浏览器在<p>标记内指定的内容之前和内容之后自动添加一行空格。

<DETAIL>标记指定根据要求用户可以查看和隐藏的其他内容。提供open属性指定初始时展开该标记中的内容，不提供open则初始不显示。

<SUMMARY>标记指定<DETAIL>标记的标头。用户可以通过单击标头以查看或隐藏详情信息。另，<SUMMARY>标记应是<DETAIL>标记的第一个子元素。

<DIV>标记用于定义文档中的部分，用于将较大的部分分组为块。

<SPAN>标记用于分组内联元素并将样式应用到其上。<SPAN>标记依赖于style属性，以将样式应用到其中所括起的文本上。style是一个全局属性，指定元素的内嵌样式。

格式化标记：
<B> (使文本变粗体)
<I> (使文本变斜体)
<U> (对文本加下划线)
<LI>
<BR> (插入一个换行符)
<HR> (将一条水平线添加到网页中)

<LI>标记用于创建列表，指定各种类型列表的列表项。
<OL>有序列表或编号列表表示以某种序列或顺序排列的一组项，<LI>指定其列表项。
<UL>无序列表或项目符号列表表示一组无需遵循特定顺序的相关项，
<LI>指定其列表项。所有在列表中的<LI>都由一个换行符隔开。
定义列表：由<DL>标记表示。在该容器标记中包含另外两个标记 <DT>表示"数据术语",<DD>表示"数据定义"。

gif保持原貌，jpeg在少颜色监视器上会失真，png是gif的替换格式。
img只指定宽度或者高度，进行等比例缩放，video也是。

超链接可链接至通过使用应用程序创建的网页，图像，多媒体文件和文档。

<A>标记(成为锚点标记)定义一个页面到其他页面的超链接。
其href属性指定当点击超链接时打开的文档的URL。target属性用于在指定的框架或窗口中打开HTML文档。覆盖当前打开(默认)：_self，新窗口打开：_blank，指定框架内打开：frame名字。

<AUDIO>标记用于在网页中包含音频文件，指定属性autoplay：音频一准备就绪就开始播放，controls：显示开始暂停停止等控件，src：指定音频文件的URL，loop：指定音频每次结束后都自动重新开始播放，muted：指定初始时音量静音。
浏览器不支持音频格式，则显示开始结束标记之间的内容。

<VIDEO>标记用于在网页中显示视频文件，属性比audip多了height：指定播放器高度，width：指定播放器宽度，poster：指定在下载视频时要显示的图像。

<METER>标记指定已知范围内的标量衡量，也称gauge(测量)，
属性：
min <= low <= high <= max
min <= value <= max
value在[low, high]范围颜色与在其它区域不同，以表符合要求的效果。

<PROGRESS>标记用于显示任务的进度。属性：max指定所需工作量，value：指定已完成工作量。

自语义标记：
如果你是一个web程序开发工程师（请结合刚刚结束的HTML项目），你希望使用自语义标记（hgroup、article、aside、header、footer、nav、figure）为你的网页提供更加的可读性，请问：
1）如果希望分组一组内容，使用哪个自定义标记？
HGROP
2）如果希望包含一段博客内容或者独立条目，使用那个自定义标记？
ARTICLE
3）如果你希望为你的网页添加导航或者介绍性质的标头，你会使用哪个
自定义标记？
HEADER

如果你想表示某部分内容是标尾，例如主页的底部部分，你会选择哪个自定义标记？
FOOTER
4）如果你有一个导航栏，为了结构清晰，你会选择哪个自定义标记？
NAV
5）如果有部分代码、图像、表格、相片等，你希望将它与网页中的标题
相关联，你会选择哪个自定义标记？
FIGURE
6）注释或提示
ASIDE

文本的font-variant属性设置为small-caps，小写字母会变成大写字母，但其大小仍然是小写的大小。

仅自定义网页上的几个少数元素使用内嵌样式，内嵌样式是直接附加到HTML文档中的标记。
当需要样式化网页上多次出现的某个具有相同样式的元素时使用内部样式表。内部样式表包含在HTML文档中标头部分的style标记中，内部样式表仅自定义包含该样式表的网页的元素。

当将以相同方法样式化多个网页以确保在整个网站保持统一外观时，使用外部样式表，外部样式表仅包含所需HTML元素的格式化规则。

使用样式表的优先级(从低到高)：
浏览器默认值
内部样式表和外部样式表(同级，在HTML文档中最后出现的样式表优先级高)
内嵌样式
如果没有定义样式类型，浏览器的默认值是应用到HTML元素的默认样式。

ID选择器用于标示您需要将其样式区别于其他元素的元素，(#)。
类选择器用于对HTML文档中不同类型的元素应用同一样式时，(.)。

类选择器可以设置仅特定HTML元素受类的影响。通过把元素类型加在类选择器的点之前完成此设置。

分组样式用于将相同样式应用到多个选择器。

嵌套样式是在元素内样式化元素的实用方法。

继续加油~