摘要：前端开发中，HTML是构建网页结构的基础语言。通过HTML，可以创建网页的骨架和各种元素，如文本、图像、链接、表单等。HTML文档由标签组成，用于描述网页内容的结构和语义。在网页设计中，HTML扮演着至关重要的角色，是实现网页交互和呈现效果的基础。

1. HTML 结构

1.1 HTML 文件基本结构

    
        第一个html程序
    
    
        hello world!
    

• html 标签是整个 html 文件的根标签(最顶层标签)
• head 标签中写页面的属性.
• body 标签中写的是页面上显示的内容
• title 标签中写的是页面的标题
• head 和 body 是 html 的子标签(html 就是 head 和 body 的父标签)
• title 是 head 的子标签. head 是 title 的父标签.
• head 和 body 之间是兄弟关系.

  标签之间的结构关系, 构成了一个 DOM 树

  D: Document 文档 O: Object 对象 M: Model 模型

  1.2 VsCode 中 使用 HTML 的快捷键

  使用 ! + TAB 快速生成代码

  
  
      
      
      
      Document
  
  
      
  
  

  •  称为 DTD (文档类型定义), 描述当前的文件是一个 HTML5 的文件.
  •  其中 lang 属性表示当前页面是一个 “英语页面”. 这里暂时不用管. (有些浏览器会根据此处的声明提示是否进行自动翻译).
  •  描述页面的字符编码方式. 没有这一行可能会导致中文乱码.
  • name="viewport" 其中 viewport 指的是设备的屏幕上能用来显示我们的网页的那一块区域.
  • content="width=device-width, initial-scale=1.0" 在设置可视区和设备宽度等宽, 并设置初始缩放为不缩放. (这个属性对于移动端开发更重要一些).

    2. HTML 常见标签

    2.1 注释标签

    

    2.2 标题标签

    有六个,从 h1 ~ h6,数字越大,则字体越小

        
    一级标题
        
    二级标题
        
    三级标题
        
    四级标题
        
    五级标题
        
    六级标题

    2.3 段落标签

    p标签表示一个段落

        
    第一段
        
    第二段
        
    第三段

    2.4 换行标签

    br 是一个单标签,不需要结束标志.
    是规范写法.

        
    第一段 Lorem ipsum dolor sit amet consectetur adipisicing elit. 
    
            Velit delectus sint vero minus architecto, tempora in 
    
             us voluptatibus quaerat nobis, veniam ea optio.

    

    描述	标记
    加粗	... ...
    倾斜	... ...
    删除线	... ...
    下划线	... ...

        加粗1
        加粗2
        倾斜1
        倾斜2
        删除线1
        删除线2
        下划线1
        下划线2

    

    2.6 图片标签

    img 标签 必须带有 src 属性, 表示图片的路径

    img 标签的其他属性

    • alt: 替换文本. 当图片不能正确显示的时候, 会显示一个替换的文字.
    • title: 提示文本. 鼠标放到图片上, 就会有提示.
    • width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片失衡.
    • border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定.

      

      2.7 超链接标签

      a 标签的属性

      • href: 必须具备, 表示点击后会跳转到哪个页面.
      • target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开.

            百度
            baidu
            test3
            ###

        2.8 表格标签

        

        这些属性都要放到 table 标签中.

        • align 是表格相对于周围元素的对齐方式. align=“center” (不是内部元素的对齐方式)
        • border 表示边框. 1 表示有边框(数字越大, 边框越粗), “” 表示没边框.
        • cellpadding: 内容距离边框的距离, 默认 1 像素
        • cellspacing: 单元格之间的距离. 默认为 2 像素
        • width / height: 设置尺寸.

          姓名	性别	成绩
          张三	男	98
          李四	女	97

          

          合并单元格

          • 跨行合并: rowspan="n"
          • 跨列合并: colspan="n"

            姓名	性别	成绩
            张三	男
            李四	女	97
            王五	97

            

            2.9 列表标签

            

                
            无序列表
                

            • 苹果
            • 西瓜
            • 香蕉

            有序列表

            1. 星期一
            2. 星期二
            3. 星期三

            自定义列表

            我的一天 吃饭 睡觉 打豆豆

            

            2.10 表单标签

            分成两个部分:

            • 表单域: 包含表单元素的区域. 重点是 form 标签.
            • 表单控件: 输入框, 提交按钮等. 重点是 input 标签

              form 标签

              ... [form 的内容]
              

              input 标签

              各种输入控件, 单行文本框, 按钮, 单选框, 复选框.

              • type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio 等.
              • name: 给 input 起了个名字. 尤其是对于 单选按钮, 具有相同的 name 才能多选一.
              • value: input 中的默认值.
              • checked: 默认被选中. (用于单选按钮和多选按钮)
              • maxlength: 设定最大长度.

                ① 文本框

                

                ② 密码框

                

                ③ 单选框

                注: 这里name属性相同,才能实现多选一

                    
                        男
                        女
                    

                

                ④ 复选框

                    
                         吃饭
                        睡觉
                        打豆豆
                    

                

                ⑤ 普通按钮

                

                ⑥ 提交按钮

                

                ⑦ 清空按钮

                

                ⑧ 选择文件

                

                2.11 label 标签

                搭配 input 使用. 点击 label 也能选中对应的单选/复选框, 能够提升用户体验.

                • for 属性: 指定当前 label 和哪个相同 id 的 input 标签对应. (此时点击才是有用的)

                      男
                      

                  

                  2.12 select 标签

                  下拉菜单

                  • option 中定义 selected="selected"表示默认选中

                        
                            --请选择地址--
                            北京
                            上海
                            广州
                            深圳
                            广西
                            西藏
                        

                    

                    2.13 textarea 标签

                    

                    2.14 无语义标签: div & span

                    div 标签, division 的缩写, 含义是 分割

                    span 标签, 含义是跨度

                    就是两个盒子. 用于网页布局

                    • div 是独占一行的, 是一个大盒子.
                    • span 不独占一行, 是一个小盒子.

                          
                              你好
                              你好
                              你好
                          
                          
                              中国
                              中国
                              中国
                          
                      

                      

                      2.15 HTML 中特殊字符

                      空格:  

                      小于号: <

                      大于号: >

                      按位与: &

                          
                      你好
                          
                              qeqeqwe        eeqw        eqeqwe 
                          
                      < >
                          
                      &

                      

                      3. 综合案例

                      一个简易的个人简历

                      
                      
                          
                          
                          
                          Document
                      
                      
                          
                      姓名某某某
                          
                      基本信息
                          
                      求职意向: Java 开发工程师
                          
                      联系电话: 157-2324-4444
                          
                      邮箱: 12321312@qq.com
                          我的 gitee
                          
                      
                          我的 博客
                          
                          
                      教育背景
                          
                      2006 ~ 2007 中国幼儿园
                              
                      2007 ~ 2013 中国小学
                              
                      2013 ~ 2016 中国初中
                              
                      2016 ~ 2019 中国高中
                              
                      2019 ~ 2023 中国大学
                          
                      专业技能
                          

                      • 熟练掌握 Java 语法
                      • 熟练掌握数据结构,例如链表,二叉树,哈希表登
                      • 熟练掌握操作系统原理,熟悉多线程编程,理解多线程安全问题
                      • 熟练掌握网络原理,熟悉网络编程,熟悉 TCP/IP 协议栈的基本原理
                      • 熟练掌握 MySQL 数据库,熟悉 SQL 语言,能够进行简单的增删改查操作,理解索引与事务的底层原理

                      我的项目

                      1. 留言墙

                         开发时间: 2022年4月10日

                         功能介绍:

                         • 支持留言发布
                         • 支持匿名留言

                      2. 学习小助手

                         开放时间: 2022年5月1日

                         功能介绍:

                         • 支持错题检索
                         • 支持同学探讨

                      个人评价

                      在学校期间,学习优良

                      

                      一个简易的简历信息填写

                      
                      
                          
                          
                          
                          Document
                      
                      
                          

                      请填写简历信息

                      姓名
                      性别	男 女
                      出生日期	--请选择年份-- 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 --请选择月份-- 1 2 3 4 5 6 7 8 9 10 11 12 --请选择日期-- 1 2 3 4 5 6 7 8 9 10
                      就读学校
                      应聘岗位	前端开发 后端开发 测试开发 运维开发
                      掌握的技能
                      项目经历
                      	我已仔细阅读过公司的招聘要求
                      	查看我的状态
                      	请应聘者确认 以上信息真实有效 能够尽早去公司实习 能接受公司的加班文化