2. 技术
    3. HTML&CSS学习

    HTML&CSS学习

    技术2026-02-19  11

    HTML&CSS学习

    HTML的一些标签

    标题

    <h1>~<h5>

    段落

    <p>

    超链接

    <a href=""></a>

    图片

    是一个void元素，没有任何内容的元素，甚至没有结束标记。

    <img src=".jpg">

    短引用

    常常以双引号显示，当然也可以通过设置css更换样式

    <q></q>

    长引用

    <blockquote></blockquote>

    换行

    <br>

    列表

    可嵌套使用，制作嵌套列表

    <!-- 无序列表 unordered list --> <ul></ul> <!-- 有序列表 ordered list --> <ol></ol> <!-- 列表元素 list item --> <li></li>

    一些属性

    id属性

    <!-- 比如说像这样 --> <h2 id="chai">Chai Tea, $1.85</h2> <!-- 比如说像这样进行访问,在链接最后加一个# --> <a href="index.html#chai">see Chai Tea</a>

    使用target打开新窗口

    <a target="_blank" href="mission.html">Read about our Mission</a>

    开始的一些准备工作

    版本说明

    html4版本共说明

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    html5版本说明，事实上，浏览器认为你正在使用标准html，不再考虑版本号。事实上html不再会有6,7,8…，制定标准的人已经把这个规范变成了一个活的标准，随着技术的发展不断更新，所以不再有版本号，认知你可以不再叫它html5，因为现在它只是html

    <!doctype html>

    指定字符编码

    写在head中

    <meta charset="utf-8">

    CSS（层叠样式表）

    style元素

    <html> <head> <title>Title</title> <!-- style元素放在html的首部里，type告诉浏览器正在使用寿命类型的样式，这里使用的是css --> <style type="text/css"> body{ background-color: #d2b48c; margin-left: 20%; margin-right: 20%; border:2px dotted black; padding: 10px 10px 10px 10px; font-family: sans-serif; } p{ background-color: #954b4b; color: #a7cece; border: 1px solid gray; } h1{ font-family: sans-serif; color: gray; } h2{ font-family: sans-serif; color: gray; } </style> </head> <body> </body> </html>

    link元素

    当需要大量页面需要使用相同的css时，可以创建.css文件，统一css样式，同时也方便统一管理和修改。.css文件中的内容（不能包含html）

    body { font-family: sans-serif; } h1, h2 { color: gray; } h1 { border-bottom: 1px solid black; } p { color: maroon; } p.greentea { color: green; }

    在html中使用

    <link type="text/css" rel="stylesheet" href="lounge.css">

    创建类选择器

    在css中创建一个类，对段落使用

    p.pfguo{ color: red; }

    在HTML中使用

    <p class="pfguo"> Join us any evening for refreshing <a href="beverages/elixir.html">elixirs</a>, conversation and maybe a game or two of <em>Dance Dance Revolution</em>. Wireless access is always provided; BYOWS (Bring Your Own Web Server). </p>

    如果需要对多个元素使用？

    在css中这样写规则

    .pfguo2{ color: black; }

    一个元素可以加入多个类

    <p class="pfguo1 pfguo2 pfguo3">

    广泛的属性

    字体

    设置字体，可设置多个，当访问用户计算机无第一种字体时，会顺延使用下一个字体，同理，若不含有，依次顺延。

    当然如果有需要，也可以设置web字体，有很多网址会提供这样的字体托管服务

    font-family：Verdana，Geneva，Arial;

    字体大小

    设置字体大小，其实是字体的高，当然也有其他的设置方法，如large或者百分数等等

    font-size:14px;

    字体颜色

    color：silver;/*设置字体颜色*/

    当然也可以使用16进制码

    当然还有很多属性，自己查吧~

    font-weight:bold/*可选的有：lighter、normal、bold、bolder*/ text-decoration:underline;/*下划线：underline 上划线：overline 删除线：line-through*/
    Processed: 0.035, SQL: 9