01-HTML基础

最新推荐文章于 2022-09-22 12:00:47 发布

ruyu00

最新推荐文章于 2022-09-22 12:00:47 发布

阅读量1k

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/ruyu00/article/details/81001096

版权

一、HTML概述

1、HTML：超文本标记语言

注：

（1）静态网页的扩展名：.html、.htm

（2）动态网页的扩展名：.asp、.jsp、.aspx、.php

2、HTML标签不区分大小写，但建议小写。所有内容都使用标签完成，不是标签的，浏览器会作为纯文本来解析（HTML解析引擎中只认标签）

注：

（1）标签与标签之间是可以嵌套的，但先后顺序必须保持一致

（2）操作思想：对数据进行不同标签的封装，通过标签中的属性对封装的数据进行操作（标签就相当于一个容器）

3、HTML注释

（1）源文件中会存在HTML的注释，但注释的内容不会显示在页面上

（2）注释标记中不能嵌套注释标记

    <!-- 注释语句 -->

4、HTML格式

<!DOCTYPE html>
<html lang="en">
    <!-- <head>最先加载。辅助信息和一些需要先加载的内容写在<head>中 -->
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <!-- 99%的内容都在<body>中 -->
    </body>
</html>

5、<标签名属性名1="属性值1" 属性名2='属性值2' ...> 内容 </标签名>

注：一般使用双引号。双引号中可以嵌套单引号，单引号中也可以嵌套双引号，但单引号和双引号都必须成对出现

6、所有标签的通用属性：id、class、title、style

二、<head>标签

1、<head></head>标签用于定义文档的头部，它是所有头部元素的容器。头部中定义的都是网页的一些辅助信息，以及需要先加载的内容

2、<head>中的标签：头部元素有<title>、<meta>、<link>、<style>、<script>等标签

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

（1）<title></title>：浏览器标题栏显示的内容。网页的<title>标签用于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速判断出网页的主题。每个网页都应该有一个独一无二的title

（2）<base href="网页中所有超链接的目录，可以是本地目录或网络目录。只作用于相对路径的超链接文件" target="打开超链接的方式，_blank表示所有的超链接都用新窗口打开">：超链接的基本设置（统一设置）

注：<base>针对的是页面中的所有超链接，设置它们链接资源的位置，以及打开资源的方式

（3）<meta name="网页的描述信息。当name取值为keywords时，content属性的内容就作为搜索引擎的关键字进行搜索" http-equiv="模拟http协议的响应消息头，后面用服务端实现" content="text/html; charset=utf-8" />：模拟http消息，设置页面的一些相关内容

eg：

（4）<link href="链接进来的目标文档，url" ref="描述目标文档与当前文档的关系，stylesheet" type="文档类型，text/css或text/javascript" media="指定目标文档在哪种设备上起作用" />：引入外部文件（链接一个与该网页有关的其他文件资源），可以有多个

（5）<style type="text/css"></style>：内嵌的css样式

三、列表标签

1、作用：格式化数据

2、列表标签分为三类

（1）列表标签<dl></dl>

<dl>
    <dt>上层项目：定义标题（必有）</dt>
    <dd>下层项目：描述信息，有自动缩进效果（可有可无，可多个）</dd>
    <dd>下层项目：描述信息，有自动缩进效果（可有可无，可多个）</dd>
</dl>

（2）无序的项目列表<ul></ul>

<ul type="排序方式。disc实心圆（默认）/circle空心圆/square（实心方块）">
    <li>无序的项目列表：至少有一对 li </li>
    <li>无序的项目列表：至少有一对 li </li>
</ul>

注：为了使<li>中的n个小盒子对齐，对它们均设置左浮动 -- css使用技巧

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
            li {
                list-style: none;
                float: left;
                margin-left: 10px;
            }
        </style>
    </head>
    <body>
        <!-- 例子：页码：1 2 3 ... -->
        <ul>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
        </ul>
    </body>
</html>

（3）有序的项目列表<ol></ol>

<ol type="排序方式，默认的序号为1 2 3">
    <li>有序的项目列表：至少有一对 li </li>
    <li>有序的项目列表：至少有一对 li </li>
</ol>

3、编号列表相互嵌套，在<li>中可以嵌套若干个完整的<ul>或<ol>

4、无论有序和无序，条目的封装用的都是<li>，而且它们都有缩进效果（与<dd>相同）

四、表格标签<table></table>

1、作用：格式化数据

2、基础表格

<!-- cellpadding是单元格的内边距，即 单元格内的文字距单元格边框的距离 -->
<!-- cellspacing是单元格的外边距，即 单元格与单元格之间的距离 -->
<!-- 
    在没有添加css样式之前（默认情况下），表格的边框border=0，即 没有边框（没有表格线）
    表格的宽度和高度靠其自身的内容来支撑，也可以设width和height
 -->
<!-- <tr>的宽度取决于<table> -->
<table border="1" bordercolor="#0000ff" cellpadding="10" cellspacing="5" width="500" 
   summary="表格的摘要。摘要的内容不会在浏览器中显示，它的作用是增强表格的可读性（语义化），使搜索引擎更好的读懂表格内容">
    <!-- 表格标题，默认居中 -->
    <caption>表格标题</caption>
    <tr>
        <!-- th：表头，默认加粗并居中

最低0.47元/天解锁文章

ruyu00

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
01-HTML基础

一、HTML概述1、HTML：超文本标记语言注：（1）静态网页的扩展名：.html、.htm（2）动态网页的扩展名：.asp、.jsp、.aspx、.php2、HTML标签不区分大小写，但建议小写。所有内容都使用标签完成，不是标签的，浏览器会作为纯文本来解析（HTML解析引擎中只认标签）注：（1）标签与标签之间是可以嵌套的，但先后顺序必须保持一致（2）操作思想：对数...
复制链接

扫一扫

专栏目录