HTML笔记

注释

1.特点：注释的内容会被浏览器忽略，不呈现在页面中，但源代码可见。

2.作用：对代码进行解释。

3.写法：

4.注释不可以被嵌套，例如：

<!--一段代码
    <!--另一段代码-->
-->

文档声明

1.作用：告诉浏览器当前网页版本。

2.写法：

<!DOCTYPE html>
 或
<!DOCTYPE HTML>
 或
<!doctype html>

3、注意：文档声明必须在网页的第一行，且在html标签的外侧。

字符编码

1、计算机对数据的操作：

存储时，对数据进行编码

读取时，对数据进行解码

2、编码、解码，会遵循一定的规范——字符集。

3、常见的字符集：

ASCII 大写字母、小写字母、数字、一些符号
ISO 8859-1 在ASCII基础上扩充了些希腊字符等
GB23312 继续扩充
GBK 收录的汉字和字符达到20000+，支持繁体中文
UTF-8 包含世界上所有语言，所有符号。

4、使用原则：

存储时，必须使用合适的字符编码，否则无法储存，数据丢失

存储时使用哪种编码，读取时采用哪种编码解码，否则，数据错乱（乱码）

设置语言

1、主要作用：让浏览器显示对应翻译提示，有利于搜索引擎优化

2、写法：

<html lang="zh-CN">

标准结构

<!DOCTYPC html>
<hyml lang="zh-CN">
     <head>
         <meta charset="UTF-8">
         <title>我是一个标题</title>
     </head>
     <body>

     </body>
</html>

输入！后回车可快速生成标准结构

（生成的结构中，有两个meta标签，暂时不用，可删除，ctrl+shift+k可删除光标所在行）

配置VScode的内置插件emmet,可对生成结构的属性进行定制
在存放代码的文件夹中，存放favicon.ico图片，可配置网站图标

开发者文档

W3C官网: www.w3c.org

W3School: www.w3school.com.cn

MDN: developer.mozilla.org

排版标签

标签名	标签含义	单/双标签
h1~h6	标题	双
p	段落	双
div	无含义，用于整体布局	双

h1最好写一个，h2~h6可适当多写
h1~h6不可嵌套
p标签中不可有h1~h6、p、div标签

语义化标签

概念：用特定标签表达特定含义
原则：标签默认效果不重要，语义重要
优势：代码结构清晰，可读性强，有利于SEO，方便设备解析

块级元素和行内元素

块级元素：独占一行
行内元素：不独占一行
原则：

块级元素：可写块级元素和行内元素
行内元素：可写行内元素，不可写块级元素
h1~h6不可嵌套，p中不可写块级元素

常用的文本标签

用于包裹词汇、短语等
常写在排版标签里
排版标签更宏观，文本标签更微观
通常时行内元素

标签名	标签语义	单/双标签
em	着重阅读内容	双
strong	很重要的内容	双
span	无语义	双

需记h1~h6、p、div、em、strong、span

图片标签

1、基本使用

标签名

标签语义

常用属性

单/双标签

img

图片

src：图片的路径

alt：图片的描述

width：图片宽度，单位像素(px)

height：图片高度，单位像素(px)

单

改变图片的宽高可能会导致比例失调
暂时认为img为行内元素
alt作用：搜索引擎通过alt得知图片内容

2、路径分类

（1）相对路径：以当前位置作为参考点，建立路径

符号	含义
./	同级
/	下一级
../	上一级

(2) 绝对路径：以根位置为参考点建立路径

本地绝对路径、网路绝对路径

3、常见图片格式

jpg
png
bmp
gif
webp
base64

超链接

从当前页面跳转到指定页面、指定文件、锚点位置、唤起指定应用

标签名

标签语义

常用属性

单/双标签

超链接

href：指定跳转到的目标

target：控制跳转页面（-self在本窗口打开；-blank：新窗口打开）

id：唯一标识，设置锚点

name：元素名字

双

列表

有序列表：有顺序或侧重顺序的列表

无序列表：无顺序或不侧重顺序的列表

列表嵌套：列表某项内容包含一个列表

自定义列表：包含术语名称和术语描述的列表

表格

由表格标题、表格头部、表格主体、表格脚注组成

标签：

table：表格

caption：表格标题

thead：表格头部

tbody：表格主体

tfoot：表格脚注

tr：每一行

th、td：每个单元格（表格头部用th，表格主体、表格脚注用td）

常用属性

<table>中border可控制表格边框，不能控制单元格宽度

给th、td设置宽度/高度，所在一列/行的宽度/高度就确定了

跨行跨列

rowspan：跨的行数

colspan：跨的列数

常用标签补充

br换行

hr分隔

pre按原文显示

表单

基本结构

常用表单控件

文本输入框

<input type="text">

name：数据名称

value：输入框的默认输入值

maxlength：输入框最大可输入长度

密码输入框

<input type="password">

单选框

<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female">女

checked:单选按钮默认选中

value：提交的数据值

name：数据名称，想要单选效果，radio的name的属性值要保持一致

复选框

<input type="checkbox" name="hobby" value="smoke">抽烟
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm">烫头

隐藏域

<input tpye="hidden" name="tag" value="100">

用户不可见的一个输入区域

name:指定数据的名称

value：指定的是真正提交的数据

提交按钮

<input type="submit" value="提交">
或<button>提交</button>

button的type属性默认值是submit

button不需要name属性

input标签编写的按钮，使用value属性指定按钮文字

重置按钮

<input type="reset" value="重置">
或<button type="reset">重置</button>

button不需要name属性

input标签编写的按钮，使用value属性指定按钮文字

普通按钮

<input type="button" value="普通按钮">
或<button type="button">普通按钮</button>

文本域

<textarea name="msg" rows="2" cols="3">文本域</textarea>

rows:行数

cols：列数

不能写type属性

下拉框

<select name="class">
    <option value="1">1班</option>
    <option value="2">2班</option>
    <option value="3" selected>3班</option>
</select>

selected:默认选中

option标签中设置了value属性，提交的数据就是value的值

name：指定数据的名称

禁用表单控件

disabled可禁用表单控件

input、textarea、button、select、option都可用

label标签

可与表单控件相关联，关联后点击文字，与之对应的表单控件就会获得焦点

让label标签的for属性的值等于表单控件的id
把表单控件套在label标签里