HTML基础知识

最新推荐文章于 2024-09-27 15:52:57 发布

小黄不辣几

最新推荐文章于 2024-09-27 15:52:57 发布

阅读量233

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/m0_53016870/article/details/123617217

版权

本文详细介绍了HTML5的基本概念，包括超文本标记语言、主流浏览器内核和Web标准。深入讲解了HTML5的结构、标签分类及关系，如标题、段落、列表、表格等，并探讨了表单、路径、属性以及表单控件的使用。同时，还涵盖了绝对路径和相对路径的运用。此外，文章还提到了表单标签form以及input标签的各种类型和属性，为初学者提供了全面的HTML5入门知识。

摘要由CSDN通过智能技术生成

-H5初识

什么是HTML5
- 超文本标记语言（Hyper Text Markup）
主流浏览器内核？
- Trident (IE内核)
- Gecko (Firefox)
- Webkit (Safari)
- Presto (Opera)
- Blink (Chrome)
Web标准
- 结构标准（HTML）
- 样式标准（CSS）
- 行为标准（JS）
HTML骨架

<!-- 声明HTML版本 -->
<!DOCTYPE html>
<!-- html 根节点 lang属性 声明使用的语言 -->
<html lang="en">
<head>
    <!-- charset属性 声明字符集 -->
    <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>

HTML标签分类
- 单标签
  - 语法：<标签名>或</标签名>
- 双标签
  - 语法：<标签名></标签名>
HTML标签关系
- 嵌套关系（父子关系）

<head>
    <title>Document</title>
</head>

并列关系（兄弟关系）

<head>
    <title>Document</title>
</head>
<body>  
</body>

标签认识

-标签认识

标题标签（h1~h6）
- 特点：
  - 双标签
  - 加粗字体
  - 一个网页中应该只存在一个h标签
  - 独占一行
段落标签（p）
- 特点
  - 双标签
  - 独占一行
  - 不能嵌套
水平线标签（hr）
- 特点：
  - 单标签
换行标签（br）
- 特点：
  - 单标签
布局标签
- div标签
  - 特点：
    - 双标签
    - 独占一行
    - 设置宽高生效
- span标签
  - 特点：
    - 双标签
    - 不独占一行
    - 设置宽高不生效
文本格式化标签（推荐使用后一种，语气更加强烈）
- b 和 strong
  - 文字加粗显示
- i 和 em
  - 文字斜体显示
- s 和 del
  - 文字以删除线方式显示
- u 和 ins
  - 文字以下划线显示
图片标签（img）
- 特点
  - 单标签
  - 不独占一行
  - 设置宽高生效
- 属性：
  - src:图片文件路径
  - alt：图片无法正常显示时的提示文字
  - title：鼠标悬停在图片上提示的问题
链接标签（a）
- 特点
  - 双标签
  - 不独占一行
  - 设置宽高不生效
- 属性：
  - href:跳转页面路径
    1. 网络链接
    2. 本地文件路径
    3. （.zip 、txt、world）文件：下载功能
    4. 空链接（#）不跳转
  - target：设置网页弹出方式
    - _self:默认方式，在当前的窗口打开
    - _blank:新建窗口打开
- 应用：
  - 锚点定位
    - 在想要跳转的目标位置的标签中添加id，在链接标签的href属性值等于目标跳转位置的id
    - href="#id名"
base标签
- 特点：
  - 单标签
  - 写在head标签中
- 属性：
  - target:设置页面中所有链接标签的窗口打开方式
  - href:设置页面中所有具有公共部分的路径
特殊字符(实体)
-   空格
- < <
- > >
注释标签
-  （ctrl+/）
列表标签
- 无序列表（ul>li*3+table）(常用)

    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>

有序列表 （ol>li*3+table）
- 属性：
  - reversed 反转排序
  - start 规定有序列表的起始值
  - type 有序列表的标记类型（1 A a I i）

<ol>
    <li></li>
    <li></li>
    <li></li>
</ol>

自定义列表 （dl>dt+dd+table）

<dl>
    <dt></dt>
    <dd></dd>
    <dd></dd>
    <dd></dd>
</dl>

注意点
- ul/ol中只能嵌套li
- li中可以嵌套任何标签
表格标签（table）
- 语法：

    <!-- 定义一个表格 -->
<table border="1" cellspacing="0" cellpadding="0" align="center">
    <!-- 表格标题 居中 -->
    <caption></caption>
    <!--
         tr 行 th / td 单元格
         th:表头 文字加粗居中
         tr:只能嵌套th/td
         td/th 嵌套任何内容
         -->
    <tr>
        <th></th>
        <th></th>
        <th></th>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>

属性：
- border:设置表格边框
- cellspacing:设置单元格与单元格之间的间距
- cellpadding:设置单元格内容与单元格边框之间的间距
表格结构：

<table>
    <!-- 表头 -->
    <thead>
        <tr>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <!-- 表格主体 -->
    <tbody>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tbody>
    <!-- 表格页脚 -->
    <tfoot>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tfoot>
</table>

合并表格单元格方式（属性）
- 跨行合并（rowspan）
  - rowspan ="合并单元格个数"
- 跨列合并（colspan）
  - colspan ="合并单元格个数"

<table>
    <tr>
        <th colspan="2"></th>
        <th></th>
    </tr>
    <tr>
        <td rowspan="2"></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

表单标签(form)
- 作用：
  - 用来收集用户信息
- 组成：
  - 表单控件（input）
  - 表单域
  - 提示文本
labeb标签
- 作用：
  - 绑定一个表单控件
- 属性
  - for:绑定表单控件
    - 指定for属性值为被绑定元素的id值相同

-标签的属性

标签的属性写在标签的开始标签中
标签的的一个属性对应一个属性值
标签的属性之间使用空格隔开
属性 = "属性值"
属性都会有一个默认属性值

路径

-路径

绝对路径
- 网络地址
- 磁盘开头的地址


<a href="http://www.baidu.com">跳转百度</a>
<a href="F:\AppWork\vueWork\myFile.txt">我的文件</a>

相对路径
- ./
  - 表示当前文件所在的文件夹
- ../
  - 表示当前文件所在的文件夹的上一级文件夹
- /
  - 表示进入下一级
  - 如果放在路径开头，表示磁盘路径，不推荐使用

<a href="./day02/01-复习.html"></a>
<img src="../day02/img/down.png" alt="">

表单标签

-表单标签（form）

表单组成
- 表单控件
- 表单域
- 提示文本

-表单控件（input）

特点
- 单标签
- 设置宽高有效
- 不独占一行
属性

属性	属性值	描述	备注
type	text	文本框
	password	密码框
	submit	提交按钮
	radio	单选按钮	与label标签连用一组radio的name必须相同才可以关联
	reset	重置按钮
	file	文件按钮
	button	普通按钮
	checkbox	复选按钮	与label标签连用一组radio的name必须相同才可以关联
name	用户自定义	控件名称
value	用户自定义	默认文本值
checked	checked	定义默认被选中
size	正整数	规定输入内容个数
placeholder	用户自定义	提示输入内容
disabled	disabled	禁用