• HTML入门


    HTML入门

    1、HTML是什么

    HTML指的是超文本标记语言,它是用来描述网页的一种语言。

    HTML不是一种编程语言,而是一种标记语言。

    标记语言是一套标记标签。

    所谓超文本,有两层含义:

    1.它可以加入图片、声音、动画、多媒体等内容(超越了文本限制)。

    2.它还可以从一个文件跳转到另一个文件,与世界各地的文件连接(超级链接文本)。

    2、HTML语法规范

    1.HTML标签是由尖括号包围的关键词,例如

    2.HTML标签通常是成对出现的,双标签

    3.有些特殊的标签必须是单个标签,单标签

    4.双标签关系可以分为两类:包含关系和并列关系

    3、HTML基本结构标签

    1.第一个HTML网页

    <html>
        <head>
            <title>我的第一个页面title>
        head>
        <body>
            我的第一个HTML页面
        body>
    html>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    2.VSCode工具生成骨架标签新增代码

    DOCTYPE html>
    <html lang="en">
    <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>Documenttitle>
    head>
    <body>
        
    body>
    html>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    2.1 DOCTYPE标签
    文档类型声明标签,作用就是告诉浏览器使用哪种HTML版本来显示网页。
    DOCTYPE html>
    
    
    • 1
    • 2
    2.2 lang语言种类

    用来定义当前文档显示的语言。

    2.2.1 en定义语言为英语

    2.2.2 zh-CN定义语言为中文

    简单来说,定义为en就是英文网页,定义为zh-CN就是中文网页

    2.3 字符集

    字符集(Character set)是多个字符的集合,以便计算机能够识别和存储各种文字。

    在标签内,可以通过==标签的charset==属性来规定HTML文档应该使用哪种字符编码

     <meta charset="UTF-8">
    
    • 1

    4、HTML常用标签

    4.1 标签语义

    就是指标签的含义,即这个标签是用来干嘛的。

    根据标签的语义,在合适的地方给一个最为合理的标签,可以让页面结构更清晰。

    4.2 标题标签 h1 - h6

    <h1>
        我是一级标题
    h1>
    
    • 1
    • 2
    • 3

    特点:1.加了标题的文字会变的加粗,字号也会依次变大。

    ​ 2.一个标题独占一行。

    4.3 段落和换行标签

    <p>
        我是一个段落标签
    p>
    
    <br />
    
    • 1
    • 2
    • 3
    • 4
    • 5

    特点:

    1. 换行标签是个单行标签
    2. 标签只是简单的开始新的一行,跟段落不一样,段落之间会插入一些垂直的间距。

    4.4 文本格式化标签

    加粗: 或者

    倾斜: 或者

    删除线: 或者

    下划线: 或者

    4.5 div 和 span 标签

    div:表示分割、分区。

    span:意为跨度、跨距。

    特点:

    1.

    标签用来布局,但是现在一行只能放一个
    。大盒子

    2.标签用来布局,一行上可以多个。小盒子

    4.6 图像标签和路径

    1.图像标签

    标签用于定义HTML页面中的图像。

    <img src="图像url"/>
    
    • 1

    src是标签的必须属性,它用于指定图像文件的路径和文件名。

    alt是替换文本,图像显示不出来的时候用文字替换。

    title是提示文本,鼠标放到图像上,提示文字

    width 给图像设定宽度

    height 给图像设定高度

    border 给图像设定边框

    2.路径

    目录文件夹:就是普通文件夹,里面存放着我们做页面所需要的相关素材。

    根目录:打开目录文件夹的第一层就是根目录

    相对路径:以引用文件所在位置为参考基础,而建立出的目录路径。

    绝对路径:是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。

    4、7超链接标签

    用于定义超链接,作用是从一个页面链接到另一个页面。

    1.超链接的语法格式

    <a href = "跳转目标" target = "目标窗口的弹出方式">文本或图像a>
    
    • 1

    2.链接的分类

    外部链接:target 打开窗口的方式 ,默认值是 _self 当前窗口打开网页 _blank 新窗口打开页面

    内部链接:网站内部页面之间的相互链接

    空连接:如果当时没有确定链接目标时,

    下载链接:如果href里面地址是一个文件或者压缩包,会下载这个文件

    ​ 地址链接的是 文件.exe 或者是 zip 等压缩包形式

    网页元素链接:在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接。

    锚点链接:点我们点击链接可以快速定位到页面中的某个位置

    • 在链接文本的href属性中,设置属性值为#名字的形式,如第二集 /a>
    • 找到目标位置标签,里面添加一个id属性 = 刚才的名字,如:

      第二集介绍/h3>

    5、HTML中的注释和特殊字符

    1.注释

    便于阅读和理解但又不需要显示在页面中的注释文字。

    HTML中的注释以" "结束

    2.特殊字符

    在HTML页面中,一些特殊的符号很难或者不方便直接使用,此时我们就可以使用特殊字符代替

    如:空格符   + ; ; < 小于号 < + ; 等

    6、HTML标签

    1.表格标签

    表格主要用于显示,展示数据

    <table>
        <tr>
            <td>单元格内的文字td>
            <th>表头单元格th>
        tr>
    table>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • table 是用于定义表格的标签。

    • tr 标签用于定义表格中的行,必须嵌套在table标签中。

    • td 用于定义表格中的单元格,必须嵌套在tr标签中。

    • 字母td指表格数据,即数据单元格的内容。

    • th 表头单元格位于表格的第一行或者第一列,表头单元格里面的文本内容加粗居中显示。

    • 表格属性:align :规定表格相对周围元素的对齐方式

      ​ border:规定表格单元是否拥有边框

      ​ cellpadding:规定单元边沿与其内容之间的空白

      ​ cellspacing:规定单元格之间的空白

      ​ width:规定表格的宽度

    • 标签表格的头部区域,内部必须要有 tr 标签
    • 标签表格的主体区域
    • 合并单元格:(1)合并方式:跨行合并:rowspan=“合并单元格的个数” ,跨列合并:colspan=“合并单元格的个数”

      ​ (2)目标单元格:跨行:最上侧单元格为目标单元格 ,跨列:最左侧为目标单元格

      ​ (3)合并单元格的步骤:先确定是跨行还是跨列,找到目标单元格,写上合并方式 = 合并的单元格数量。最后删除多余的单元格。

    2.列表标签

    列表作用用来布局

    列表可以分为三大类:无序列表,有序列表和自定义列表。

    2.1 无序列表==(重点)==
    <ul>
        <li>列表项li>
        <li>列表项li>
    ul>
    
    • 1
    • 2
    • 3
    • 4
    2.2有序列表
    <ol>
        <li>列表项li>
        <li>列表项li>
    ol>
    
    • 1
    • 2
    • 3
    • 4
    2.3自定义列表==(重点)==
    <dl>
        <dt>名词1dt>
        <dd>名词1解释1dd>
        <dd>名词1解释2dd>
    dl>
    
    • 1
    • 2
    • 3
    • 4
    • 5

    3.表单标签

    1.表单的组成:表单域,表单控件(也称表单元素)和提示信息3部分构成。

    2.表单域是一个包含表单元素的区域,会把它范围内的表单元素信息提交给服务器。

    <form action="url地址" method="提交方式" name="表单域名称">
        各种表单元素控件
    form>
    
    • 1
    • 2
    • 3

    2.3自定义列表==(重点)==

    <dl>
        <dt>名词1dt>
        <dd>名词1解释1dd>
        <dd>名词1解释2dd>
    dl>
    
    • 1
    • 2
    • 3
    • 4
    • 5

    3.表单标签

    1.表单的组成:表单域,表单控件(也称表单元素)和提示信息3部分构成。

    2.表单域是一个包含表单元素的区域,会把它范围内的表单元素信息提交给服务器。

    <form action="url地址" method="提交方式" name="表单域名称">
        各种表单元素控件
    form>
    
    • 1
    • 2
    • 3
  • 相关阅读:
    HTML <meta> 标签常见属性及应用场景
    leetcode - 1980. Find Unique Binary String
    术语与定义
    每日一练 | 网络工程师软考真题Day43
    JavaSE17——面向对象_多态
    卷积神经网络
    冰狐智能辅助相对autojs的优势
    DDD 实战 (2):看看代码结构长啥样(值得收藏)
    flink 1.17.1的pom.xml模板
    目前最流行的 5 大 Vue 动画库,使用后太炫酷了
  • 原文地址:https://blog.csdn.net/m0_53181852/article/details/127750814