第一天笔记

HTML

HTML超文本标记语言―—HyperText Markup Language。

超文本是什么? 链接
标记是什么? 标记也叫标签，带尖括号的文本

标签语法

标签成对出现，中间包裹内容
<>里面放英文字母(标签名)
结束标签比开始标签多/
拓展
- 双标签:成对出现的标签
- 单标签:只有开始标签，没有结束标签

基本骨架

html:整个网页
head:网页头部，用来存放给浏览器看的信息，例如CSS
- title:网页标题
body:网页主体，用来存放给用户看的信息，例如图片、文字

标签的关系

作用：明确标签的书写位置;让代码格式更整齐

父子关系（嵌套关系)
兄弟关系（并列关系)
代码格式
父子关系：子级标签换行且缩进(Tab键)
兄弟关系：兄弟标签换行要对齐

注释

排版标签，标题和段落

标题标签

一般用在新闻标题、文章标题、网页区域名称、产品名称等等。

标签名: h1 ~h6（双标签）

显示特点：

文字加粗
字号逐渐减小
独占一行（换行）

经验分享：

h1标签在一个网页中只能用一次
用来放新闻标题或网页的logo. h2~ h6没有使用次数的限制

段落标签

一般用在新闻段落、文章段落、产品描述信息等等。

标签名: p（双标签）

显示特点：

独占一行
段落之间存在间隙

换行和水平线标签

换行标签 \
（单标签）
水平线标签 \
（单标签）

文本格式化标签

作用：为文本添加特殊格式，以突出重点。常见的文本格式

加粗
倾斜
下划线
~~删除线~~
等等

标签名	效果
\\	加粗
\\	倾斜
\\	下划线
\\	删除线

标签名	效果
b	加错
i	倾斜
u	下划线
s	删除线

strong、em、ins、 del标签自带强调含义（语义），一般使用这一套

两个文本格式化标签是在一行显示

图像标签

作用：在网页中插入图片。

<img src="图片的url">

src用于指定图像的位置和名称，是的必须属性。

标签属性

属性	作用	说明
alt	替换文本	图片无法显示时显示的文字
title	提示文本	鼠标悬停在图片上时显示的文字
width	图片的宽度	值为数字，没有单位
height	图片的高度	值为数字，没有单位

属性名=”属性值”
属性写在尖括号里面，标签名后面，标签名和属性之间用空格隔开，不区分先后顺序

文件路径

路径分类：

相对路径：从当前文件位置出发查找目标文件
绝对路径：从盘符出发查找目标文件

相对路径写法：

. 当前文件所在文件夹
../ 当前文件上一级文件夹
/ 进入某个文件夹里面

绝对路径写法：

Windows 默认是\，其他系统是/，建议统一写为/

超链接标签

作用：点击跳转到其他页面。

注意：属性 target=”_blank” 表示新窗口跳转页面

经验分享：开发初期，不知道超链接的跳转地址，href属性值写#，表示空链接，不会跳转

音频标签

常见属性

属性	作用	特殊说明
src（必须属性）	音频URL	支持格式：MP3、Ogg、Wav
controls	展示音频控制面板	/
loop	循环播放	/
autoplay	自动播放	为了提升用户体验，浏览器一般会禁用自动播放

简写：属性名和属性值一样，可以进行简写，例如

视频标签

常见属性

属性	作用	特殊说明
src（必须属性）	视频URL	支持格式：MP4、WebM、Ogg
controls	展示音频控制面板	/
loop	循环播放	/
muted	静音播放	/
autoplay	自动播放	为了提升用户体验，浏览器支持在静音模式下自动播放

列表

作用：布局内容排列整齐的区域。

无序列表

作用：布局排列整齐的不需要规定顺序的区域。

标签：ul嵌套li，ul是无序列表，li是列表条目。

<ul>
	<li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
    ......
</ul>

注意：

ul标签里面只能包裹li标签
li标签里面可以包裹任何内容

有序列表

作用：布局排列整齐的需要规定顺序的区域。

标签：ol嵌套li，ol是有序列表，li是列表条目。

<ol>
	<li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
    ......
</ol>

注意：

ol标签里面只能包裹li标签
li标签里面可以包裹任何内容

定义列表

标签：dl嵌套dt和dd，dl是定义列表，dt是定义列表的标题，dd是定义列表的描述/详情。

<dl>
	<dt>列表标题</dt>
	<dd>列表描述/详情</dd>
    ......
</dl>

注意：

dl标签里面只能包裹li标签
dt和dd标签里面可以包裹任何内容

表格

表格标签

网页中的表格与Excel表格类似，用来展示数据。

标签:table嵌套tr，tr嵌套td / th。

标签名	说明
table	表格
tr	行
td	表头单元格
th	内容单元格

提示：在网页中，表格默认没有边框线，使用border属性可以为表格添加边框线。

表格结构标签

作用：用表格结构标签把内容划分区域，让表格结构更清晰，语义更清晰。

标签名	含义	特殊说明
thead	表格头部	表格头部内容
tbody	表格主体	主要内容区域
tfoot	表格底部	汇总信息区域

合并单元格

作用：将多个单元格合并成一个单元格，以合并同类信息

跨行合并
跨列合并

合并单元格的步骤：

1．明确合并的目标

2．保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量）

跨行合并，保留最上单元格，添加属性rowspan
跨列合并，保留最左单元格，添加属性colspan

3．删除其他单元格

表单

input 标签的 type 属性不同，则功能不同

type属性值	说明
text	文本框，用于输入单行文本
password	密码框
radio	单选框
checkbox	多选框
file	上传文件

input 标签的占位文本：即为提示信息

<input type="xxx" placeholder="提示信息">

单选框 radio

常用属性

属性名	作用	说明
name	控件名称	控件功能，同时只能选中一个（单选功能）
checked	默认选中	属性名和属性值相同，简写为一个单词

上传文件 file

常用属性

属性名	作用	说明
multiple	多选文件	多选文件上传

多选框 checkedbox

常用属性

属性名	作用	说明
checked	默认选中	属性名和属性值相同，简写为一个单词

下拉菜单

标签：select嵌套option，select是下拉菜单整体，option是下拉菜单的每一项。

默认选中：selected

文本域

标签：textarea，双标签。

不用于input的text，这个会自动换行

有拖拽功能，一般会禁用

一般使用css设置尺寸

label 标签

作用：网页中，某个标签的说明文本

经验：用label标签绑定文字和表单控件的关系，增大表单控件的点击范围。

示例：增大单选框点击范围

写法1
- label标签只包裹内容，不包裹表单控件
- 设置label标签的for属性值和表单控件的id属性值相同
<input type="radio" id="man">
<label for="man">男</label>
写法2
- 使用label标签包裹文字和表单控件，不需要属性
<label><input type="radio">女</label>

注意：

outline: none 屬性可取消表单控件的焦点框
如何设置 placeholder 的文字属性呢？::placeholder 选中就是 placeholder 属性文字样式

按钮标签

<button type=""></button>

常用属性（记得使用form表单标签包裹使button发挥作用）

属性名	说明
submit	提交按钮，点击后可以提交数据到后台（默认功能）
reset	重置按钮，点击后可以将表单控件恢复默认值
button	普通按钮，默认没有功能，一般配合JavaScript使用