HTML入门与前端开发基础-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_38144883/article/details/125844994

本文介绍了HTML的基础知识，包括网页、浏览器内核、Web标准的结构、表现和行为三个方面。讲解了HTML标签的使用，如标题、段落、图像、链接、表单等，并探讨了浏览器兼容性和页面布局。此外，还提到了开发工具如VSCode的快捷键和插件，以及表单元素在搜集用户信息中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html 简介

黑马程序员pink老师前端入门

1. 网页

- 网站
- 网页 ：html 文件，由图片、文字、链接、声音、视频等 (元素) 组成
- html : 超文本标记语言 （超文本标签语言）

2. 常用浏览器

IE、火狐（Firefox)、谷歌（Chrome）、Safari和Opera等
浏览器的内核
浏览器内核（渲染引擎）: 负责读取网站的内容，整理讯息，计算网页的显示方式并显示页面。

浏览器	内核	备注
IE	Trident	iE、猎豹、360极速浏览器、百度浏览器
firefox	Gecko	火狐浏览器内核
Safari	Webkit	苹果浏览器内核
chrome/Opera	Blink	chrome/opera浏览器内核。Blink其实是Webkit的分支。

目前国内一般浏览器都会采用 Webkit/Blink 内核，如 360，UC，QQ，搜狗等。

3. web 标准(重点)

W3C（万维网联盟）

为什么需要？

web 标准构成

主要包括：结构（Structure）、表现（Presentation）、行为（Behavior）三个方面。

标准	说明
结构	结构用于对【页面元素】进行分类和整理，现阶段主要学的是HTML
表现	表现用于设置网页元素的板式、颜色、大小等【外观样式】，主要是css
行为	行为指网页模型的定义及【交互】的编写，现阶段主要学的是javascript

web 标准提出的最佳体验方案：结构、样式、行为相分离。

简单理解：结构写到 HTML 中，表现写到 CSS 文件中，行为写到Javascript文件中。

三者中【结构】最重要。

*** 会飞的小鸟 ***

4. html 标签导读

Html 语法规范

双标签：< > < />

单标签：< />

标签关系：包含关系（父子关系）、并列关系
```
包含：
  <html>
      <head></head>
      <body></body>
  </html>
并列:
  <head></head>
  <body></body>
```

Html 基本结构标签

每个网页都会有一个基本的结构标签（我们称为骨架标签），页面内容也在这些标签上书写。
HTML页面也称为HTML文档。

  <!DOCTYPE html>
  <html>
      <head>
          <title>第一个网页</title>
      </head>
      <body>
          重头开始学习html
      </body>
  </html>

*** 小猪佩琦 ***

开发工具 Dw, Sublime, WebStrom, HBuilder, VScode
- VSCode 工具创建页面
- 快捷键
  
  快捷生成 html 框架：！
  
  字体变大：ctrl +
  
  字体变小：ctrl -
- VSCode 插件使用 - 必须联网
  
  记得重新启动软件或者重新加载
  
  点击扩展按钮（左侧菜单栏）
  - Chinese
  - Open in browser
  - Auto Rename Tag
  - JS-CSS-HTML Formatter
  - CSS Peek
DOCTYPE 和 lang 以及字符集的作用
文档类型声明，作用就是告诉浏览器使用哪个HTML版本来显示网页。
```
<!DOCTYPE html>
```
这句代码的意思是：当前页面采用 HTML5 版本来显示网页。
1. 固定要求位置在整个页面的首行。
2. 不属于HTML标签，文档类型的声明标签。
```
<html lang="en">
```
用来定义当前文档的显示语言。
1. en 定义语言为英语
2. zh-CN 定义语言为中文
简单来说，en 英文网页，zh-CN 中文网页。网站类型。
```
<meta charset="UTF-8">
```
字符集（Character set）是多个字符集的集合。以便计算机能够识别和存储各种文字。

charset 常用的值有：GB2312、BIG5、GBK 和【UTF-8】也被称为【万国码】，基本包含了全世界所有国家需要用到的字符。
备注: 防止乱码
标签语义

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

标签语义:作为标题使用，并且依据重要递减。
标题,一共六级显示，文字加粗一行显示，由大到小依次减，从重到轻依次减 <h1> - <h6>
段落标签和换行标签

段落：<p></p>
注意：1. 文本根据浏览器自动换行；
2. 段落中间有空隙

换行：<br/>
注意：文本强制换行
文本格式化标签

加粗：<strong>推荐</strong>|<b></b>

倾斜：<em>推荐</em>|<i></i>

删除线：<del>优先</del>|<s></s>

下划线：<ins>优先</ins>|<u></u>
div 和 span
<div>和<span>没有语义的，它们就是一个盒子，用来装内容的。
- div : 独占一行，大盒子
- span : 一行多个，小盒子
图像标签
- 图像标签和路径（重点）
```
<img src="图像url" alt="" title="" width="px" height="" border="">
```
- src 是图像标签的必须属性
- alt 和 title 区别：
  出现时机不一样。
  alt 提示文本；
  title 替换文本。
目录文件夹和根目录

目录文件夹：普通的文件夹，和网站相关的素材目录等等…

根目录：最外层文件夹

相对路径(重点)

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

这里简单来说，图片相对于HTML页面的位置

相对路径分类	符号	说明
同一级目录		图像文件位于HTML文件同一级如 `<img src="baidu.gif"/>`
下一级路径	/	图像文件位于HTML文件下一级如 `<img src="/baidu.gif"/>`
上一级路径	…/	图像文件位于HTML文件上一级如 `<img src="../baidu.gif"/>`

  同一级
  - html.html
  - img.img
  
  下一级
  - html.html
  - img
    - img.img

  上一级
  - img.img
    - html.html

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

例如：“D：\web\imgs\img.jpg” ; 网络位置 “http://www.itcast.cn/2008/images/img.img”
链接标签

超链接标签：
<a href=""></a> href(必须)属性；target 打开窗口的方式 _self | _blank

超链接的分类：
- 外部链接：http://www. 开头;
- 内部链接：网站内部的相互链接
  ，直接写网页的名称就可以（或则用相对路径）；
- 空链接：“#” 代替
- 下载链接：地址链接的是要下载的文件，压缩包/excel/img 等文件 …
锚点链接

当点击链接快速定位到页面中的某个位置

a href=“#name”;目标位置标签添加 id 属性

<a href = "#live"></a>

<h4 id="live">个人生活</h4>
注释标签和特殊字符

注释标签： | ctrl + /

特殊字符： < >

表格标签的基本使用

主要作用：显示、展示数据

基本语法：

  <table>
    <tr>行
      <td>单元格</td>
      <td>单元格</td>
    <tr>
  </table>

表头单元格标签

特点：内容居中加粗显示

  <tr>
    <th></th>
  </tr>

表格相关属性

属性名	属性值	描述
align	left、center、right	规定表格相对周围元素的对齐方式
border	1或“”	表格单元是否拥有边框
cellpadding	像素值	规定单元边框与其内容之前的空白，默认1px
cellspacing	像素值	单元格之前的空白，默认2px
width	像素值或百分比	规定表格的宽度
heigh	像素值或百分比	规定表格的高度

表格结构标签:更好的语意

<table>
  <thead>
      <tr>
          <th></th>
          <th></th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td></td>
          <td></td>
      </tr>
  </tbody>
</table>

合并单元格

合并单元格方式
- 跨行合并: rowspan = “合并单元格的个数”
- 跨列合并: colspan = “合并单元格的个数”
目标单元格
合并单元格步骤
- 确定跨行还是跨列
- 找到目标单元格
- 删除多余的代码

  <table>
    <thead>
        <tr>
            <th>啦</th>
            <th colspan="2">跨列合并</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2">1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>5</td>
            <td>6</td>
        </tr>
    </tbody>
  </table>

表格总结

表格标签：<th><td><tr>|<thead><tbody>

表格属性：align|cellpadding|cellspacing|width|heigh

合并单元格：rowspan|colspan

列表

表格是展示数据的，那么列表就是用来布局的
- 无序列表(重点)：并列无顺序之分
  
  ul 只能放 li,li可以放任何元素的；
```
<ul>
    <li>水果</li>
    <li>鲜花</li>
    <li>粮食</li>
</ul>
```
- 有序列表(理解)：顺序排列
```
  <ol>
    <li>大</li>
    <li>中</li>
    <li>小</li>
  </ol>
```
- 自定义列表（重点）:一个大哥领着一群小弟，无项目符号(注意：三组标签组成)
```
  <dl>
      <dt>水果</dt>
      <dd>鲜花</dd>
      <dd>粮食</dd>
  </dl>
```

表单

目的：搜集用户信息

组成：表单域、表单控件（也称表单元素）、提示信息。

表单域:一个包含表单的区域，实现用户的搜集与传输，提交给服务器。
```
<form  action="" method="POST|GET" name="name1"></form>
```

input 输入表单元素

<input type="?"/>

type	描述
text	文本框
password	密码框
radio	单选按钮：name 属性必须有相同名字;checked
checkbox	多选按钮框：name 属性必须有相同名字；checked=“checked” 默认选中状态；
submit	提交按钮: 提交表单数据给服务器；value=“”;
reset	重置按钮: 清除表单的所有数据；value=“”;
button	普通按钮; 不提交数据，只是执行某种操作；和 js 搭配使用
file	文件上传（文件域）

name
value

name 和 value 必须有是给后台人员使用的;
maxlength : 表单约定最多的字符数，表单带有最大长度分别是 85 和 55 个字符的两个输入字段;

label 标注标签

光标定位到要操作的标签

增加用户体验

  <label for="name">用户名：</label>
  <input type="text" id="name" />

select 下拉标签

  <select name="from" id="from">
    <option value="">---请选择---</option>
    <option value="beiji" selected="selected">北京</option>
    <option value="tianjin">天津</option>
    <option value="sanxi">陕西</option>
    <option value="hebei">河北</option>
  </select>

textarea 文本域标签

用户输入文字较多的情况下（如：留言版、评论、反馈）
<textarea name="" id="" cols="30" rows="10">今日反馈</textarea>

注册页面案例（一、二、三、四）

<h3>综合练习：青春不常在，赶紧谈恋爱</h3>
<table width="500" border="" cellspace="0">
  <tr>
      <td>性别</td>
      <td>
          <input type="radio" name="sex" id="nan">
          <label for="nan"><img src="" alt="">男</label>
          <input type="radio" name="sex" id="nv">
          <label for="nv"><img src="" alt="">女</label>
      </td>
  </tr>
  <tr>
      <td>生日</td>
      <td>
          <select>
              <option value="">---请选择年---</option>
              <option value="">1992</option>
              <option value="">1993</option>
              <option value="">1994</option>
              <option value="">1995</option>
          </select>
          <select>
              <option value="">---请选择月---</option>
              <option value="">1</option>
              <option value="">2</option>
              <option value="">3</option>
              <option value="">4</option>
          </select>
          <select>
              <option value="">---请选择日---</option>
              <option value="">1</option>
              <option value="">2</option>
              <option value="">3</option>
              <option value="">4</option>
          </select>
      </td>
  </tr>
  <tr>
      <td>所在的地区</td>
      <td><input type="text" value="北京斯密达"></td>
  </tr>
  <tr>
      <td>婚姻状况</td>
      <td>
          <input type="radio" name="merry" checked="checked">未婚
          <input type="radio" name="merry">已婚
          <input type="radio" name="merry">离异
      </td>
  </tr>
  <tr>
      <td>学历</td>
      <td><input type="text"/></td>
  </tr>
  <tr>
    <td>喜欢的类型</td>
    <td>
        <input type="checkbox" name="hoppy"> 淑女
        <input type="checkbox" name="hoppy"> 御姐
        <input type="checkbox" name="hoppy"> 可爱
        <input type="checkbox" name="hoppy"> 清纯
        <input type="checkbox" name="hoppy" checked="checked"> 妩媚
    </td>
  </tr>
  <tr>
      <td>自我介绍</td>
      <td>
          <textarea name="" id="">很高兴脱离单身狗了</textarea>
      </td>
  </tr>
  <tr>
      <td></td>
      <td>
          <input type="submit" value="免费注册"/>
      </td>
  </tr>
  <tr>
      <td></td>
      <td>
          <input type="checkbox" checked="checked"/> 我同意并注册
      </td>
  </tr>
  <tr>
      <td></td>
      <td>
          <h5>我承诺</h5>
          <ul>
              <li>单身</li>
              <li>消息属实</li>
              <li>抱着严格的态度</li>
          </ul>
      </td>
  </tr>
</table>