01前端入门HTML5 +Css3+电商网页制作：HTML5

01前端入门HTML5 +Css3+电商网页制作 0. 来源1. 基础认识1.1 Web 标准构成1.2 基本语法 2. vscode使用3. HTML3.1 注释3.2 标签3.2.1 文本标签3.2.2 媒体标签3.2.2.1 图片标签3.2.2.2 音乐标签3.2.2.3 视频标签 3.2.3 超链接标签 3.3 列表标签3.3.1 无序列表3.3.2 有序列表3.3.3 自定义列表 3.4 表格标签3.4.1 表格标题和表头迷人的巨人标签3.4.2 表格结构标签3.4.3 合并迷人的巨人 3.5 表单标签3.5.1 input系列标签3.5.2 button系列标签3.5.3 select下拉菜单标签3.5.4 textarea文本域标签3.5.5 label标签 3.6 语义化标签3.7 字符实体

0. 来源

路线:
https://www.bilibili.com/read/cv10431130
视频：
https://www.bilibili.com/video/BV1Kg411T7t9

1. 基础认识 1.1 Web 标准构成

html：结构 hyper text markup language
CSS: 表现
JS：行为

1.2 基本语法

hyper text markup language：标签标记语言
加粗
骨架结构：整体，头部，标题，主体

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=, initial-scale=1.0"> <title>Document</title></head><body> ceshiyongli</body></html> 2. vscode使用

!：快速创建html主体结构
alt+b：默认浏览器打开文件

3. HTML 3.1 注释

快捷键：通用：ctrl+/

3.2 标签 3.2.1 文本标签

单标签：不需要结束位置

:换行

：横线

标题标签
h1-h6：独占一行
ctrl+d，多个选择

段落标签
p标签：独占一行

换行标签
<br>

水平分割线标签
<hr>

文本格式化标签:强调语义
加粗，下划线，倾斜，删除线等效果
strong加粗，ins下划线，em倾斜，del删除
b，u，i，s
不需要独占一行

3.2.2 媒体标签 3.2.2.1 图片标签

<img src="" alt="">
属性没有先后之分，
alt：图片显示不出来的替换文本
title:鼠标悬停时提示文本
width，height

3.2.2.2 音乐标签

audio src="" > </audio>
其他属性：controls 显示控件，autoplay 自动播放(部分浏览器不支持)，loop 循环播放
支持格式：mp3，wav,ogg

3.2.2.3 视频标签

video src="" > </video>
其他属性：同音频，autoplay 需要结合muted静音自动播放

3.2.3 超链接标签

必应超链接
a href=“https://cn.bing.com/?mkt=zh-CN&FORM=BEHPTB”
属性：打开页面在新标签：target=“_blank”

3.3 列表标签 3.3.1 无序列表

ul嵌套li标签-父子关系

3.3.2 有序列表

ol嵌套li标签-父子关系

3.3.3 自定义列表

dl 列表整体
dt 主体
dd 内容

3.4 表格标签

table（表格整体）-tr（行）-td（迷人的巨人）
属性：border：边框宽度
width
height

3.4.1 表格标题和表头迷人的巨人标签

caption：表格大标题，table里
th：表格迷人的巨人，tr里，用来替换td

3.4.2 表格结构标签

thead
tbody
tfoot
用于包裹tr标签
加快浏览器渲染

3.4.3 合并迷人的巨人

跨行合并，跨列合并
rowspan colspan
左上原则，保留与删除

3.5 表单标签

input系列标签button按钮标签select下拉菜单标签textarea文本域标签label 标签 3.5.1 input系列标签

属性：type=""
text ：文本框，单行文本
password：密码框
radio：单选框
CheckBox：多选框
file：文件选择
submit：提交按钮
reset：重置按钮
button：普通按钮，配合js添加功能

input的file属性
属性：placeholder:占位提示符
radio:单选实现：name属性分组，checked
上传多个文件：mutiful属性input的按钮属性
type属性：
submit提交不需js，
reset重置，
button无功能，需js
submit和reset的自动执行需要<form action=""></form>
属性value更改按钮上的文字 3.5.2 button系列标签

button可以作为标签，同input的button

3.5.3 select下拉菜单标签

select下拉菜单的整体
option下拉菜单的每一项
selected 默认选中（同多选单选，checked）

3.5.4 textarea文本域标签

多行输入
<textarea name="" id="" cols="30" rows="10"></textarea>
cols:宽度
rows：高度
实际工作中用css来定义宽高

3.5.5 label标签

用于绑定内容与表单标签之间的关系
方法一：
label标签包裹起内容
表单标签（input）上添加id属性
赋值label标签中的for属性值为之前的id属性

方法二：
直接使用label标签把内容和表单标签（input）一起包裹起来
删除label标签中的for属性

3.6 语义化标签无语义标签
div 标签
span 标签有语义标签（了解）
html5新添加的，手机端常用
header 网页头部
nav 网页导航
footer 网页底部
aside 网页侧边栏
section 网页区块
article 网页文章 3.7 字符实体

网页不能识别多个空格
空格实体： 