HTML随笔记录（一）

最新推荐文章于 2025-02-11 11:02:33 发布

卑微小张在线咕咕咕

最新推荐文章于 2025-02-11 11:02:33 发布

阅读量190

点赞数 1

CC 4.0 BY-SA版权

分类专栏： HTML

本文链接：https://blog.youkuaiyun.com/qq_43460290/article/details/93307496

HTML 专栏收录该内容

7 篇文章

订阅专栏

本文主要介绍了HTML的相关知识，包括元素大小写规则、属性省略情况，HTML5指定字符集的方式，还阐述了多种标签的作用、属性及使用场景，如<title>、<base>、<link>等，同时提及了特殊字符、图片属性、表格标签等内容。

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

首先html中允许元素使用大写元素。

标签（元素）不区分大小写
元素可以省略结束标签。
元素属性可以省略属性值
属性值可以不用引号

HTML5支持的两种指定页面使用的字符集的方式。

首先是是使用Content-type指定字符集，或者直接使用charset的指定字符集

< meta http-equiv=“Content-Type” content=“text/html ; charset=gb2312” >
gb2312是为了防止乱码。
< meta charset=“gb2312” >

网页类型分为动态和静态的。
前者主要是 .jsp .php .asp .aspx
后者主要是 .html 和 .htm（dos系统保留）

< title >用于给你写的网页定名字。
< base >该文档所有的链接的默认地址或者默认目标。使用相对路径的时候比较有用。
< link >中的三个重要属性主要有三个：rel，href，type
rel用于规定文档与被连接文档之间的关系。
ex：rel="dns-prefetch"预先解析缓存文档中使用的域名，目的是为了提高网页访问速度，
当一个网页频繁使用其它域名资源的时候特别有用。
href 用于资源的路径
type规定被连接文档的打开方式。
< meta >一般放在head中，定义元数据，主要有http-equiv、name、content
http-equiv是把content属性值关联到http头部，常见的属性值有Content-Type
（浏览器接受的文档类型，一般是text/html）expires（设定网页到期时间）
refresh（网页刷新）
name把content属性关联到一个名称，content定义前两者属性相关的元信息，是必要的。

<!DOCTYPE html>
<html>
    <head>
        <title>this is my first web</title>
        <link rel="shortcut icon" href="images/tianmao.ico" type="image/x-icon"/>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
        <meta name="keywords" content="various develop"/>
        <meta name="description" content="what's this?"/>
        <meta http-equiv="expires" content="1 Agu 2018"/>
        <meta http-equiv="refresh" content="3"/>
    </head>
</html>

< div >块级标签通常用于布局，
通常使用id和class为标签的类标识，可以通过id和
class对div的样式进行设置，id是唯一的标签标识，class为标签的类标识。
相当于一个容器，而其大小由其内容决定，默认情况下高度由内容的高度决定，宽度自动适应屏幕。

< font >控制文本的大小、颜色和字体。

< h1 >到 < h6 >字体大小依次递减。

特殊字符：
空格：&nbsp；
引号：&quot；
小于：&lt；
大于：&gt；
版权号：&copy；

图片 < img >中的几个属性
alt 图片找不到时要替换的文字。如果图片资源使用的是外网资源，
则不会显示要替换的文字。如果使用的是本网站的资源（相对路径给出），
则找不到图片时会显示替换的文字，并保留图片设置的宽高结构。
align 图片周围文字的垂直对齐情况。该属性的使用已经过时了。要让图片和文字对齐、
，通常的做法是让图片称为一个标签的背景。如京东商城。
常用的属性值有：top（与图片的顶部对齐）、middle（与图片的中部对齐）、
bottom（默认，与图片的底部对齐）使用场景：图片的左右两边没有文字，
文字在图片上部或文字在图片的下部。如果图片的左右两边有文字的话，
一般通过给一个标签（可以使用文字标签标签）设置背景图片的形式来实现。

< span >用来组合行内元素，一边用样式来格式化他们。

< i >显示斜体通常使用它来显示图片和背景照片。

< em >和< i >很类似，但是前者主要用来修饰文字，后者用来修饰照片

< dl >一般搭配< dt >（标题，可文可图）和 < dd >（对标题的描述）一起使用。

< table >表格标签中的属性：
align（水平对齐方式）、bgcolor（背景颜色）、border（表格的边框）、
cellpadding（单元格与内容之间的距离）、cellspacing
（单元格的间距，设置为0时，表格变为实线表格）、
width（表格的宽度，可以用%或者像素）。

< caption> 表格的标题 < thead> 表格头部< tbody> 表格主体部分。使结构更加分明。

表格的跨行跨列显示：rowspan（跨行）、colspan（跨列）

水平分割线：< hr >
< hr size=“5”(线的厚度） color=“red”(线的颜色） width=“300”（线的宽度）>

< a >标签锚标记
html的name属性用于创建锚标记。< a name=“marker”>Name< /a>
为了达到这种跳转效果，请在href参数中使用该标记。< a href="#marker">Name< /a>

<!DOCTYPE html>
<html>
    <head>
        <title>链接到其它的页面</title>
    </head>
    <body>
        <a href="#helpme">this</a>
        <!--
            ...content
        -->
        <a name="helpme">here</a>
    </body>
</html>

滚动< marquee >
< marquee scrolldelay=“100” direction=“up” >
(滚动文字或者图像前者为滚动延迟时间（默认值为90）
后者为滚动对象的方向(默认从右向左））
< /marquee >

表单元素中

<!DOCTYPE html>
<html>
    <body>
        <form action="http://www.sohu.com" method="POST">
            <input type="text" />
            <input type="password" />
            <input type="hidden" />
            <input type="radio" />
            <input type="checkbox" />
            <input type="file" />
            <input type="button" />
            <input type="reset" />
            <input type="submit" />
            <input type="image" />
            <textarea rows="5" cols="40">
            </textarea>
            <select>
                <option></option>
            </select>
        </form>
    </body>
</html>

配合解释：
在这里插入图片描述