HTML基础

什么是HTML

HTML（HyperText Markup Language）即超文本标记语言。

• 超文本：比普通文本更加强大，可以通过链接和交互方式组织和呈现信息，不仅仅包含文本，还可能包含图片、音频，甚至学者添加的评注、补充或脚注等。
• 标记语言：由标签构成的语言。

  HTML标签都是预定义的，不同标签表示不同内容。类似于Word中的“样式”，选中文本点击“标题1”后，文本即显示为“标题1”的效果，这里的“标题1”就是一种标签。

  我是一级标题
  我是二级标题
  我是三级标题

  经过浏览器解析后，这些标签 

  、

  、

   分别呈现不同级别的标题。

  

  学习HTML主要就是学习如何使用各种标签。

  认识HTML标签

  HTML代码由标签构成，例如：

  我是三级标题

  • 标签名（如body）写在尖括号  中。
  • 大多数标签成对出现，如开始标签 

     与结束标签 

    。
  • 少数标签是单标签，只有开始标签，没有对应的结束标签。
  • 标签之间的内容是标签的内容。
  • 开始标签中可以带有属性，如 id 属性给标签赋予唯一标识：

    我是三级标题

    HTML文件基本结构

      
        第一个页面
      
      
        hello world
      
    

    HTML标签之间的嵌套关系构成了DOM树（Document Object Model，文档对象模型）。

    

    可以使⽤chrome的开发者⼯具查看⻚⾯的结构.F12或者右键审查元素,开启开发者⼯具,切换到Elements标签,就可以看到⻚⾯结构细节.

    

    HTML快速入门

    开发工具

    虽然HTML可用记事本编写，但不便。课程中我们使用专业前端开发工具：

    Visual Studio Code（简称VS Code）

    • 微软2015年发布的跨平台源码编辑器，支持Windows、macOS和Linux。
    • 内置JavaScript、TypeScript、Node.js等语言支持，也支持C++、C#、Java、Python、PHP、Go等多种语言。
    • 官网：https://code.visualstudio.com

      安装后，在VS Code中新建 .html 文件，输入 ! 并按 Enter 或 Tab，即可生成HTML骨架代码：

      
      
        
        
        Document
      
      
        
      
      

      细节介绍（了解即可）

      • ：文档类型定义（DTD），声明当前文件为HTML5文档。
      • ：lang属性表示页面语言为英语，可用于浏览器自动翻译提示。
      • ：设置页面字符编码为UTF-8，防止中文乱码。
      • ：
        • 设置视窗口宽度与设备屏幕宽度相同，初始缩放比例为1，主要用于手机等移动设备页面适配。

          在中任意输入文字，保存后用浏览器打开即可看到效果：

            第一个HTML页面
          

          

           HTML常见标签

          标题标签（h1 - h6）

          依次六级，数字越大字体越小。

          hello
          hello
          hello
          hello
          hello
          hello

          段落标签（p）

          HTML中换行、空格默认无效，使用 

           标签来定义段落。

          这是一个段落

          注意：

          •  标签定义的段落默认无缩进。

          • 段落内容会根据浏览器宽度自动换行。
          • HTML中多余空格、换行会被合并为一个空格。

            换行标签（br）

            用于换行，是单标签，不需要结束标签，推荐写法为 
            。

            这是一个br标签
            
            这是一个br标签
            

            

            区别于 

             会产生较大空隙，
             只是简单换行。

            

            图片标签（img）

            必须含有 src 属性，指定图片路径。

            https://blog.csdn.net/Lucas_Micheal/article/details/rose.jpg 图片文件需与HTML文件放置在同一目录。

            常用属性：

            • width / height：控制图片宽高，通常设置一个，另一个按比例缩放。
            • border：边框宽度，通常用CSS控制。

              注意：

              • 标签属性之间用空格分隔，格式为键值对。
              • 属性顺序不限。

                超链接标签（a）

                • href：必须，指定点击后跳转页面地址。
                • target：指定打开方式，默认_self当前页打开，_blank新窗口打开。

                  百度

                  链接形式：

                  • 外部链接，跳转到其他网站。
                  • 内部链接，网站内部页面之间跳转，写相对路径即可。

                    我是1.html
                    点我跳转到2.html
                    
                    我是2.html
                    点我跳转到1.html

                    空链接： 使用#占位。

                    空链接

                     表格标签

                    • ：定义表格。
                      ：定义行。

                      ：定义单元格。 ：表头区域。 ：表体区域。 表格标签通常结合CSS控制样式，但HTML有部分属性可控制： align：表格与周围元素对齐方式，如align="center"。 border：边框粗细，数字越大越粗。 cellpadding：单元格内容到边框的内边距，单位像素。 cellspacing：单元格间距，默认2像素。 width / height：尺寸设置。 姓名 性别 年龄 张三 男 10 李四 女 11 表单标签 表单是用户输入信息的重要途径，通常分为两部分： 表单域：包含表单元素的区域，核心是  标签。 表单控件：输入框、按钮等，核心是  标签。  form标签  标签用于定义表单域，描述数据提交的方式和目标页面。 ... [表单的内容] action 属性指定数据提交的目标页面。 method 属性指定提交方式（如 GET 或 POST，默认为 GET）。 后续结合后端代码详细研究表单提交机制。 input标签  标签定义多种输入控件，如文本框、按钮、单选框、复选框等。 常用属性： type：必须，定义控件类型，如 text、password、radio、checkbox、button、submit 等。 name：为控件命名，便于表单提交时识别数据。对于单选框，相同 name 才能实现多选一。 value：控件的默认值。 checked：用于单选框或复选框，表示默认选中。 常用类型 文本框 密码框 单选框 性别: 男 女 多选一要求单选框具有相同的 name 属性。 复选框 爱好: 吃饭 睡觉 打游戏 普通按钮 默认无功能，需结合JavaScript实现交互： 提交按钮 select标签  标签定义下拉菜单， 标签定义选项。 北京 上海 广州 selected="selected" 表示默认选中。  textarea标签  标签定义多行文本输入框。 默认内容 rows、cols 分别指定行数和列数。 通常在CSS中控制大小，而非直接在HTML中设置。 无语义标签：div & span  和  是用于布局的无语义标签。  ：块级元素，独占一行，常用于划分大的布局区域。  ：行内元素，不独占一行，常用于标记部分文本。 咬人猫 咬人猫 咬人猫 兔总裁 兔总裁 兔总裁 阿叶君 阿叶君 阿叶君 综合练习：用户注册 用户注册界面提示： 使用表格进行整体布局。 使用  标签实现各种输入控件。 用户注册 用户名 手机号 密码 已有账号? 登录 CSS基础 CSS介绍  什么是CSS? CSS（Cascading Style Sheet，层叠样式表）用于控制网页的样式。 它能够对网页中元素的位置和排版进行像素级精确控制，实现页面的美化效果。 CSS实现了页面的结构和样式分离。 形象地说，CSS相当于网页的“化妆术”，给页面“打扮”。 hello p { color: red; font-size: 30px; } hello 基本语法规范 CSS语法格式： 选择器 { 属性1: 值1; 属性2: 值2; ... } 选择器：决定针对哪个元素应用样式。 声明：决定修改哪些样式。 声明中的属性 是键值对，使用冒号 : 分隔键和值，分号 ; 分隔多条声明。 p { /* 设置字体颜色 */ color: red; /* 设置字体大小 */ font-size: 30px; } 注释使用 /* 注释内容 */。 在多数编辑器中，使用快捷键 Ctrl+/ 可快速注释切换。 引入方式 CSS有三种引入方式，语法如下： 引入方式 语法描述 示例 行内样式 在标签内使用 style 属性 绿色 内部样式 在  标签中定义样式 h1 { ... } 外部样式 使用  标签引入外部CSS文件 三种引入方式的区别： 内部样式代码冗余多，不便维护，多用于讲解和调试。 行内样式只针对单个元素，适合简单快速修改，不适合复杂样式。 外部样式实现HTML与样式完全分离，适合大型项目和团队开发。 书写规范 CSS大小写不敏感，但建议统一小写。 冒号 : 后面加空格。 选择器与 { 之间加空格。 p { color: red; }  CSS选择器 CSS选择器用来选中页面上的元素，只有选中后才可以设置这些元素的样式。 就像游戏中先选中单位，才能让单位执行命令一样。 主要选择器有： 标签选择器 类选择器（class） ID选择器（id） 复合选择器（组合选择器） 通配符选择器 我是一个div，class为font32 我是一个div，class为font32 我是一个div aaa bbb ccc 1111 2222 3333 提交 标签选择器 /* 选择所有a标签，字体颜色红色 */ a { color: red; } /* 选择所有div标签，字体颜色绿色 */ div { color: green; } 类选择器 /* 选择class为font32的元素，字体大小32px */ .font32 { font-size: 32px; } 多个元素可以共用一个类名。 一个元素可以使用多个类名，用空格分隔。 ID选择器 /* 选择id为submit的元素，颜色红色 */ #submit { color: red; } ID选择器对应的id必须唯一，不可被多个元素共享。 通配符选择器 /* 设置页面所有元素的颜色为红色 */ * { color: red; } 复合选择器 /* 只设置ul下li下的a标签颜色为蓝色 */ ul li a { color: blue; } 选择器可以是任意组合（标签、类、id混用）。 空格表示后代选择。 使用逗号,可以同时选中多个不同的选择器。 常用CSS属性 准备如下HTML： 我是文本1 color 设置字体颜色。 .text1 { color: red; } 颜色的表达方式： 英文单词，如 red, blue。 RGB格式，如 rgb(255,0,0)。 十六进制，如 #ff00ff。 font-size 设置字体大小。 .text1 { font-size: 32px; }  border（边框） 复合属性，可以同时设置边框宽度、样式和颜色。 .text1 { border: 1px solid purple; } width / height 设置元素宽度和高度。 只有块级元素可以设置宽高。 块级元素常见如 h1-h6、p、div 等。 行内元素如 a, span 不独占一行，不能直接设置宽高。 通过 display 属性可修改元素显示类型： /* 转为块级元素 */ display: block; /* 转为行内元素 */ display: inline; .text1 { width: 200px; height: 100px; display: block; } padding（内边距） 设置内容和边框之间的距离。 内容默认紧贴边框，padding 控制空白区域。 .text1 { padding: 20px; } 可分别设置四个方向： padding-top padding-bottom padding-left padding-right margin（外边距） 设置元素与其它元素之间的距离。 .text1 { margin: 20px; } 可分别设置四个方向： margin-top margin-bottom margin-left margin-right