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

置顶 M.AI

已于 2022-07-11 17:55:40 修改

阅读量1.7k

点赞数

分类专栏：前端文章标签：前端 html

于 2021-12-21 21:31:01 首次发布

本文链接：https://blog.csdn.net/weixin_44403520/article/details/121696381

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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 文本标签

几个特殊的单标签：不需要结束位置
<br>:换行
<hr>：横线；水平分割线
标题标签
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 字符实体

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

M.AI

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
01前端入门HTML5 +Css3+电商网页制作：HTML5

文章目录一. 基础认识1. Web 标准构成2. 基本语法二. vscode使用三. html3.1 注释3.2 标签一. 基础认识1. Web 标准构成html：结构 hyper text markup languageCSS: 表现JS：行为2. 基本语法hyper text markup language：标签标记语言加粗骨架结构：整体，头部，标题，主体<!DOCTYPE html><html lang="en"><head> &l
复制链接

扫一扫