阶段性总结（HTML）

小李不吃糖0

已于 2022-09-18 11:09:17 修改

阅读量186

点赞数 1

文章标签： html

于 2022-09-18 11:06:35 首次发布

本文链接：https://blog.csdn.net/m0_50911050/article/details/126913774

版权

HTML基础

前端的基本构成（HTML+CSS+JS）

HTML超文本标签语言，即是网页骨架的构建，包含了网页基本元素
CSS 层叠样式表，负责规定html元素的样式，即负责网页元素的外观
JavaScript,负责网页模型定义以及交互行为，即负责网页元素与用户的交互

1HTML基本结构

<!DOCTYPE html>
文档的声明，告知浏览器用什么文档类型来解析这个文档

<html lang="en">
DOM树的根元素

<head>
    给浏览器搜索引擎看的
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    浏览器渲染给用户看的
</body>
</html>

2基本标签

单标签

<br/>换行，<hr/>水平线, <input>输入，<meta>辅助标签，<link>外部引用

双标签

<html>网页根元素、<head>头部元素、<title>网页标题、<body>网页主体

<table>表单元素、<tr>表单-行、<td>表单-行内格、<span>行内标签、<p>段落、<h1>~<h6>标题、<div>块标签、<a>超链接、<script>js脚本、<style>样式表

<b>/<strong>加粗、<u>/<ins>下划线、<i>/<em>斜线、、<center>居中

H5新增标签

结构标签：主要用来对页面结构进行划分，页面结构划分为顶部、导航、内容(页眉、区块)、页脚等。

header：一般网页头部信息/标题。
nav：导航条部分内容。
section：独立内容区块，一般内容区。
article：特殊独立区块，表示页眉中核心内容。
aside：标签内容之外，与标签内容相关的辅助信息。
figure：独立单元，如有图文混合模块。
hgroup：头部信息/标题相关信息。
footer：底部信息。

2.标签属性

<img src="" alt="" title="">
    src：指定路径和文件名 
    alt：替换文本，即图片不能显示的替换的文字
    title: 提示文本，鼠标悬浮时的提示信息
<a href="" target=""></a>
    href:跳转目标位置
    参数包括
        外部链接: 如 "http://www.baidu.com"
        内部链接: 如 "index.html"
        空连接：如"#"
        下载链接: 如 "压缩包文件名称"
        锚点链接：如 "#No1",会跳转到id=No1的html元素
     target：跳转方式
    参数包括
        _self,会在相同的框架或者窗口中打开链接
        _blank,会在一个新的窗口中打开链接
        _parent,会在父窗口或者包含来超链接引用的框架的框架集中打开链接。
        _top,会清除所有被包含的框架，并打开链接

3.列表

3.1无序列表

<ul> <!-- ul中只能放li标签 -->
        <li>1</li><!--li中可以放任意标签  -->
        <li>2</li>
        <li>3</li>
    </ul>

3.2有序列表

<ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
</ol>

3.3自定义列表

 <dl>
        <!-- 通常用于footer中模块的制作，dd标签是dt标签内容的解释说明或下级附属内容 -->
        <dt>线下门店</dt>
        <dd>小米之家</dd>
        <dd>服务网点</dd>
        <dd>零售网点</dd>
    </dl>

4.表单标签

用于收集用户信息，主要包括表单域，表单控件，提示信息

表单域：用于划定表单区域，并设置提交相关参数

<form action="目标服务器程序地址" method="POST 或GET" name="表单名称">
        表单内容
    </form>

表单控件：即表单中的元素，如按钮，文本域等

<input type="类型" name="名称">
    <b>type的属性值包括</b>
    button	  定义可点击的按钮（通常与 JavaScript 一起使用来启动脚本）。
    checkbox  定义复选框
    file	  定义文件选择字段和 "浏览..." 按钮，供文件上传。
    password  定义密码字段（字段中的字符会被遮蔽）
    radio	  定义单选按钮
    reset	  定义重置按钮（重置所有的表单值为默认值）
    submit	  定义提交按钮
    text	  默认。定义一个单行的文本字段（默认宽度为 20 个字符）
    <b>H5新增属性</b>
    date	定义 date 控件（包括年、月、日，不包括时间）。
    email	定义用于 e-mail 地址的字段。
    number	定义用于输入数字的字段。
    search	定义用于输入搜索字符串的文本字段。
    tel	定义用于输入电话号码的字段。
<select>
        <!-- 多选栏 -->
        <option value="北京"></option>
        <option value="天津"></option>
</select>
<textarea cols="30" rows="10">
        <!-- 文本域 -->
</textarea>