HTML基础

该随笔为pink老师前端入门教程的笔记

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

结构：用于对网页元素进行整理和分类（HTML）

表现：设置网页元素的版式颜色大小等外观样式（CSS）

行为：网页模型的定义及交互的编写（JavaScript）

HTML语法规范

所有标签在<>内且大多数成对出现

<html></html>

标签有包含关系与并列关系

HTML基本结构标签

标签名 定义 说明
<html></html> HTML标签 根标签
<head></head> 文档的头部 head标签中我们必须要设置的标签是title
<title></title> 文档的标签 让页面拥有一个属于自己的页面标签
<body></body> 文档的主体 元素包含文档的所有内容，页面内容基本都是放到body里面

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>Document</title>
</head>
<body>
    
</body>
</html>

  • <!DOCTYPE>标签

    文档类型声明标签，用于告诉浏览器HTML版本

    当前页面采用html5显示：

    <!DOCTYPE html>

    注意：

    1. 该声明位于文档最前面，处于<html>标签之前
    2. <!DOCTYPE>不是一个HTML标签，是文档类型声明标签

  • lang语言

    定义当前文档的显示语言

    1. en定义语言为英文
    2. zh-CN定义语言为中文

    其实对于文档显示，en也可以显示中文，zh-CN也可以显示英文

  • charset字符集

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

    <meta charset="UTF-8">

HTML常用标签

  • 标题标签<h1>-<h6>

    标签语义：作为标题使用，并依据重要性递减

    特点：一个标题独占一行

  • 段落标签<p>

    标签语义：把文字分段；

    特点：文本根据浏览器大小自动换行 段落之间保有空隙

  • 换行标签<br/>

    标签语义：强制换行；

    特点：单标签，知识单纯的换行，不会插入垂直的间距

  • 文本格式化标签

    <strong>或<b> 加粗 <em>或<i>倾斜 <del>或<s>删除线 <ins>或<u>下划线

  • <div>和<span>没有语义，像一个盒子。

    div（division）分割、分区；span跨度

    div单独占一行，是一个大盒子；span一行可以放多个，是一个小盒子

  • 图像标签<img src="图像URL"/> 为单标签

    src为<img>标签的必须属性，用于指定图像文件的路径和文件名

    其他属性：

    属性 属性值 说明
    src 图片路径 必须属性
    alt 文本 替换文本，图像不能显示的文本
    title 文本 提示文本，鼠标放到图片上，显示的文字
    width 像素 设置图像的宽度
    heigh 像素 设置图像的高度
    border 像素 设置图像的边框粗细

    提示：

    1. 宽度和高度只修改一个时，另外一个等比例缩放；
    2. border不常用；
    3. 属性之间没有顺序，采用键值对的格式（key = "value"）

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

相对路径分类 符号 说明
同一级 如<img src="baidu.gif" />
下一级 / 如<img src="images/baidu.gif" />
上一级 ../ 如<img src="../baidu.gif" />

绝对路径：例如"C:\image\img.jpg"或者完整的网络地址

  • 超链接标签<a> ：从一个页面链接到另一个页面(anchor 锚)

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

    href属性为必须属性，target默认为_self(_blank：在新窗口打开)

    链接分类：

    1. 外部链接：<a href="http://www.baidu.com">百度</a>
    2. 内部链接：网站内部页面直接相互连接<a href="index.html">首页</a>
    3. 空连接：<a href="#">空连接</a>
    4. 下载连接：如果href内为压缩包或者文件等形式 <a herf="img.zip">下载</a>
    5. 网页元素的连接：在网页中的各种网页元素，如文本、图像、表格、音频等都可以添加超链接<a href="#"><img src="img.jpg"/></a>
    6. 锚点连接：快速定位到页面中的某个位置
      • 在链接文本的href属性中，设置属性名为#名字的形式：<a href="#one">第一</a>
      • 找到目标位置标签，里面添加一个id 属性 = 名字 ：<h3 id="one"> 第一个</h3>

注释和特殊字符

注释：

<!--laala--> 快捷键 ctrl+/

特殊字符：

空格符 &nbsp;

小于号<&lt;

大于号>&gt;

表格标签

目的：用来展示数据

基本语法：

<table>
    <tr>
        <td>单元格内的文字</td>
        ...
    </tr>
    ...
</table>
  1. <table></table>定义表格
  2. <tr></tr>定义表格中的行，必须放在<table></table>标签内
  3. <td></td>定义表格中的单元格，必须在<tr></tr>标签内
  4. td（table data）

表头单元格标签

表头单元格里的文本加粗居中显示，一般位于表格的第一行或第一列

<th></th> (放在<tr></tr>标签内)

表格属性用css（与html属性名相同）；html中用于table标签内

属性名 属性值 描述
align left、center、right 规定表格内容的对齐方式
border "1"或"" 规定表格单元是否有边框，默认为""（没有边框）
cellpadding 像素值 规定单元格边沿与其内部之间的空白，默认为1
cellspacing 像素值 规定单元格之间的空白，默认为2
width 像素值或百分比 规定表格的宽度
height 像素值或百分比 规定表格的高度

表格结构标签

将表格分为表格头部和表格主体两大部分，必须放在<table></table>标签内

<thead>标签 ：表格的头部区域，内部必须包含<tr></tr>标签

<tbody>标签 ：表格的主体区域，用于存放数据本体

合并单元格

把多个单元格合并，主要方式：跨行合并rowspan 、跨列合并colspan

目标单元格：写合并代码的地方

  • 跨行：最上侧单元格为目标单元格
  • 跨列：最左侧单元格为目标单元格

合并单元格步骤：

  1. 确定跨行合并/跨列合并
  2. 找到目标单元格，写上合并方式=合并的单元格数量：<td colspan="2"></td>
  3. 删除多余单元格

列表标签

目的：用来布局

分为三大类：无序列表、有序列表和自定义列表

无序列表

<ul>标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用<li>标签定义。

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ...
</ul>
  1. <ul>中只能放<li>，直接输入其他标签或者文字是不允许的
  2. <li>相对于一个容器，可以容纳任何元素
  3. 无序列表会带有自己的样式属性，但在实际使用时会使用CSS来设置

有序列表

<ol>用于有序列表，列表顺序用数字表示，用<li>定义列表项

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ...
</ol>
  1. <ol>标签内只能嵌套<li>，直接输入其他标签或者文字是不允许的
  2. <li>相对于一个容器，可以容纳任何元素
  3. 有序列表会带有自己的样式属性，但在实际使用时会使用CSS来设置

自定义列表

常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号

<dl>标签用于定义描述列表，与<dt>(定义项目/名字)和<dd>(描述每一个项目/名字)一起使用。

基本语法如下：

<dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
</dl>
  1. <dl>标签内只能嵌套<dt>和<dd>
  2. 通常一个<dt>对应多个<dd>

表单标签

目的是为了收集用户信息

一个完整的表单由表单域。表单控件（表单元素）和提示信息3个部分组成。

表单域

是一个包含表单元素的区域

<form>标签用于定义表单域，实现用户信息的收集和传递

<form>会吧它范围内的表单元素信息提交给服务器

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

  • action：用于指定接收并处理表单数据的服务器程序的url地址

  • method：用于设置表单数据的提交方式，其取值为get或post

  • name：指定表单名称，用于区分同一页面多个表单域

input输入表单元素

主要用于收集用户信息

<input type="属性值" />
  1. <input/>为单标签
  2. type属性设置不同的属性值来指定不同的控件类型

type属性的属性值：

属性值 描述
button 定义可点击按钮（多数情况下，用于通过JavaScript启动脚本）
checkbox 定义复选框
file 定义输入字段和"浏览"按钮，供文件上传
hidden 定义隐藏的输入字段
image 定义图像形式的提交按钮
password 定义密码字段，该字段中的字符被掩码
radio 定义单选按钮
reset 定义重置按钮，重置会清除表单的所有数据
submit 定义提交按钮，提交会把表单数据发送到服务器
text 定义单行输入字段，用户可输入文本，默认20个字符

<input>标签其他属性：

属性 属性值 描述
name 由用户自定义 定义input元素名称
value 由用户自定义 定义input元素值
checked checked 规定此input元素首次加载时应当被选中
maxlength 正整数 规定输入字段的字符最大长度
  1. 单选按钮radio或复选框checkbox必须有相同的name。
  2. radio与checkbox设置value时，并不在页面显示，主要用于后台。
  3. name和value是每个表单元素都有的属性值，主要给后台人员使用。
  4. 单选按钮和复选框可以设置checked属性，当页面打开时默认选中

<label>标签

为input元素定义标注，用于增强用户体验

<label>用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点转到或者选择对应的表单元素上，增强了用户体验。

<label for="nan">男</label>
<input type="radio"  name="sex" id="nan" />

<label> 标签的for属性与相关元素的id属性相同

select下拉表单元素

目的：节约页面空间

<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
    ...
</select>
  1. <select>内至少包含一对<option>
  2. 在<option>中定义selected="selected"时，当前项为默认选中项

textarea文本域元素

可以定义多行文本输入

<textarea rows="3" cols="20">
	文本内容
</textarea>
  1. cols="每行中的字符数" ，rows="显示的行数" （实际应用中都是用css来改变大小）
posted @ 2021-08-06 11:49  艾雅雅雅  阅读(77)  评论(0)    收藏  举报