网页

构成网站的基本元素，通常由图片、链接、文字、声音、视频等元素组成

什么是Html

超文本（超越文本限制、超级链接文本）标记语言（是一套标记标签），描述网页的一种语言

网页的形成

由网页元素组成，这些元素是由html标签描述出来，通过浏览器解析来显示给用户的

浏览器

浏览器：网页显示、运行的平台

浏览器内核：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面

Web标准

Web标准是由W3C组织和其他标准化组织制订的一系列标准的集合

W3C（万维网联盟）国际著名的标准化组织

浏览器不同，显示页面或者排版会有差异，就需要Web标准

结构和表现标准是w3C万维网联盟

行为标准是ECMA欧洲电脑厂商联合会

web标准构成

结构 html（超文本标记语言）(hyper text markup language)

表现 css（层叠样式表）（cascding style sheet）

行为 Javascript 三方面

web标准提出的最佳体验方式：结构、样式、行为相分离

html 相关发展

xhtml 可扩展的超文本标记语言

xhtml1.0 语法要求更加严格（标签不可以大写，单标签必须闭合< br/>)

html2.0 不向前兼容，出生就死掉了

html5 2004提出草案 2008年正式发布

html5 基本结构更简洁语法宽松（大小写随意，标签可以不闭合)

html4----xhtml1.0----xhtml2.0----html5

Html基本结构标签（骨架标签）

<html>（跟标签）<head>（文档头部，必须要设置的标签是title）<title></title>（文档标题，网页标题）</head><body>（文档主体，放页面内容）</body>
</html>

vscode基本使用

ctrl＋n 新建文件
保存文档并加尾缀 .html
ctrl＋加号键放大视图
! 生成骨架
alt＋B 打开浏览器
F5 刷新
F2 重命名
ctrl + O 打开
shift + alt+ A 局部注释
shift + alt + F 自动调节格式
alt + Z 自动换行
Ctrl + b 打开侧边栏
shift + 方向键选中文本
ctrl + 左右键光标定位到单词首/末
Fn + end 光标定位到文本首/末
Ctrl+Z 撤销
Ctrl+shift+Z 反回撤销
Ctrl+F 查找
alt + 上下键上下换位置
Ctrl+Shift+K：删除行

VSCode工具生成骨架标签新增代码

< !DOCTYPE >

文档声明标签，告诉浏览器使用哪种HTML版本来显示网页，位于文档最前面位置，处于标签之前。

< !DOCTYPE html > html5 版本

lang 语言种类

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

字符集

多个字符的集合，charset属性规定html文档字符编码

< meta charset=“UTF-8”/ >

charset 常用值：GB2312（简体中），BIG5（繁体中），GBK（简，繁体中），UTF-8(万国码)

HTML 常用标签

标题标签

< h1 > - < h6 > 重要性递减

<h1> 一级标签 </h1>

段落标签

< p > 段落 < /p >

特点：根据浏览器窗口的大小自动换行，段落之间有空隙

paragraph 的缩写

换行标签

< br / > 单标签

特点：开始新的一行，无缝隙

b,i,u,sub

加粗：< strong > < /strong > 强调突出语义

< b > < /b > 单纯加粗

倾斜：< em > < /em >

< i > < /i >

删除线：< del > < /del >

< s > < /s >

下划线：< ins > < /ins >

< u > < /u >

上标：< sup> < /sup>

下标：< sub> < /sub>

水平线：< hr/>

 <hr size="5px" width="100px">

可以相互嵌套，不分优先级

font 修饰文本标签

<p><font color="red">红色</font></p>

<p><font color="red" size="5" face="楷体"><p>

盒子标签

< div > 和 < span > 标签是没有语义的，他们是一个盒子，用来装内容（布局）

特点：< div > < /div > 大盒子，一行只能放一个

< span > < /span > 小盒子，一行可以放多个

img

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

eg：< img src=“img.jpg” alt=“图片名称” title=“图片名称”/ >

单标签，注意双引号**“”**不要丢失

属性之间空格分隔

键值对格式，key=“value”，属性=“属性值”

图像标签

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本，图片不能显示，就显示文字
title	文本	提示文本，鼠标放到图片上，显示文字
width	像素	图片宽度（只更改宽度，图片等比例缩放）
height	像素	图片高度（只更改高度，图片等比例缩放）
border	像素	图片边框粗细

路径

目录文件夹：普通文件夹，内部放置了做这个页面的相关素材

相对路径：引用目录文件夹内的位置为参考基础，而建立出的目录路径

同一级路径：( . / ) < img src="xxx.jpg“ >

下一级路径：( / ) < img src="xxx/xxx.jpg ”>

上一级路径：( . . / ) < img src="xxx. ./xxx.jpg“ >

绝对路径：通常是从盘符开始的路径。

eg：< img src=“C:\Users\Administrator\Desktop\学习应用” >

注意相对路径和绝对路径的斜杠方向相反。

a 链接

< a href=“链接目标的URL地址” target=“目标窗口的弹出格式” title=“鼠标上的提示信息”>

target=
1.原窗口打开：_ self
2.新窗口打开：_ blank

空连接：< a href=“#” > xx < /a >

下载链接：href里是压缩包或文件，文件格式是不可以在浏览器开的格式

邮箱跳转：

<a href="mailto:xxxxxxxxx@qq.com">xxxxxxxxx@qq.com</a>

锚点链接：
点击位置：< a href=“#名称” > 目标位置 < /a >
目标位置：< h3 id=“名称” > 目标位置 < /h3 >

注释

< !–xxx– >

特殊字符

空格：&nbsp；

小于号：&lt；

大于号：&gt；

版权：& copy;

注册商标：& reg；

< pre >

< pre > < / pre >

欲格式化特点，通常保留空格和换行符

< q>< /q>

q 标签为引号，默认值为引号

q{quotes: “#”“#”;} 改变默认值""为 #

quotes 是 < q> 的专属属性

表格标签

表格的主要作用：显示、展示数据（布局页面）

<table><tr>(行)<th>xxx</th> (表头)   <td>xxx</td> (单元格)</tr>
</table>

表格标题

< caption> < /caption> 表格标题

caption-side 标题位置

< th>< /th> 列标题自身携带加粗居中等标题样式，是一个有标题语义的 td

表格属性

属性名	描述
align=right(右),center,left	表格水平位置
valign=top,middle,bottom	垂直位置
border	边框大小
cellpadding	单元格边缘与内容之间的距离
cellspacing	单元格之间的空白
width	表格宽度
height	表格高度

行分组

表格结构标签

< thead > < /thead > 定义表格头部

< tbody > < /tbody > 定义表格主体

< tfoot> < /tfoot> 表尾

表格结构标签在< table > < /table >标签内

直接用对应的标签包裹对应的tr即可，默认表头表尾较小，表体宽大；

列分组

< colgroup>< /colgroup> 一个标签代表一组

span=”” 这个组里有几列，默认值1，在标签内添加

列分组的权重最弱，覆盖不了已经有的样式

color----改变的是组分隔线的颜色

组分隔线，默认右边的线是自己的，但是可以通过border定义左右分隔线的样式

组分割线

给 table 元素添加

属性：rules=”” 组分隔线

属性值：rows 每一行都有线

cols 每一列都有

all 全有

none 都没有，默认值

groups 分组的位置有

合并单元格

跨行合并: rowspan=“合并个数” |

跨列合并: colspan=" 合并个数" —

列表标签

主要作用：布局页面，整齐有序。

无序列表

<ul>     （只能嵌套<li></li>标签，不能嵌套其他标签和文字）<li>列表内容</li>   （可以嵌套所有元素）<li>列表内容</li>
</ul>

小圆点图标 type：
type=“disc 实心圆,circle 空心圆,square 实心方块,none 无”

有序列表

<ol>      （只能嵌套<li></li>标签，不能嵌套其他标签和文字）<li>列表内容</li><li>列表内容</li>
</ol>

type= “1/a/A/i/I”

start= “数字” //数字几开始

自定义列表

<dl>    （定义列表，只能嵌套<dt></dt>和<dd></dd>)<dt>列表名称</dt>  （类似于表头, dl 内不限制 dt 数量）<dd>列表内容</dd>  （dd 和 dt 内可以嵌套其他元素）<dd>列表内容</dd>
</dl>

一般用于图文混排，图片放 dt 里文字放 dd 里

表单标签

表单的作用：收集用户信息

表单由表单域，表单控件，提示信息组成。

表单域

表单域：包含表单元素的区域

< form > 会把范围内的表单信息提交给服务器

<form action="url地址" method="提交方式" name="表单域名称">
</form>

属性	属性值	作用
action	url地址	用于指定接收并处理表单的服务器程序的url地址
method	get（能看见提交参数）或post	用于设置表单数据的提交方式
name	名称	定义表单的名称，区分同一个页面的多个表单域

method 提交方法
get 默认不安全获取数据可以分享小于2KB 效率高
post 安全传送数据不可以分享不限大小效率低

表单控件

input输入表单元素

< input/ >标签用于收集用户信息

<input type="属性值"/>
<input/> 是单标签

< input/ >内元素

属性	属性值	描述
name	用户定义	定义input元素名称（主要给后台人员使用）
value	用户定义	规定input元素的值（主要给后台人员使用，可以在用户层显示这个值）
checked	checked	规定input元素首次加载被选中，针对于选择按钮
maxlength	正整数	规定输入字段中的字符最大值
type	见下表	指定不同的控件类型

type=“以下属性值”

属性值	描述
button	定义可点击按钮（eg:获取短信验证）
checkbox	定义复选框（checkbox如果是一组，name值必须相同）
file	定义输入字段和浏览按钮，供文件上传（文件域，上传文件按钮）
hidden	定义隐藏输入字段
image	定义图像形式的提交按钮，具有提交功能
password	定义密码字段，该字段中的字符会被掩码
reset	定义重置按钮，清除表单中的所有数据需要定义表单
submit	定义提交按钮，提交按钮会把表单数据发送到服务器
text	定义单行的输入字段，用户可在其中输入文本
radio	定义单选按钮（取name值一样时才会单选， radio如果是一组，name值必须相同）

label标签

< label > < /label> 关联文本和控件，标签用于绑定一个表单元素（扩大鼠标可点击范围，个人理解）

显式：
<label for="sex">男</label>  for与id 两者属性值需相同
<input type="radio" name="sex" id="sex"/>

隐式：
<label>  label标签内不要出现for
<input type="radio" name="sex">
</label>

select 下拉列表

< select >标签控件，定义下拉列表

<select><option selected="selected">辽宁省</option>  （selected="selected"默认选中）<option>山东省</option><option>河南省</option>
</select>

optgroup 分组

属性 label 里是组名

<select name="add2">
<optgroup label="辽宁">
<option>大连</option>
<option>沈阳</option>
<option>辽阳</option>
<option>锦州</option>
</optgroup>
<optgroup label="黑龙江">
<option>哈尔滨</option>
<option>齐齐哈尔</option>
<option>牡丹江</option>
<option>佳木斯</option>
</optgroup>
</select>

textarea 多行文本输入框

< textarea >标签可以创建多行文本输入框，常用于留言板，文本域

HTML 中 < textarea> 和 < /textarea> 之间最好不要有空隙

<textarea rows="3" cols="20" style="resize:none;">value值</textarea>

textarea {resize: none;} 禁止拖拽

fieldset 表单字段集

fieldset 就是一个框框，像一个带边框的div

legend 字段集标题

一个表单里可以有多个字段集，字段集可以相互嵌套

<form action="">
<fieldset>
<legend>基本信息</1egend>
用户名：<input type="text"name="user"><br>
用户名：<input type="text"name="user"><br>
用户名：<input type="text"name="user"><br>
用户名：<input type="text"name="user"><br>
用户名：<input type="text"name="user"><br>
用户名：<input type="text"name="user"><br>
</fieldset>
</form>

快速生成HTML结构语法

生成标签直接输入标签名按tab键即可比如 div 然后tab 键，就可以生成
如果想要生成多个相同标签加上 * 就可以了比如 div*3 就可以快速生成3个div
如果有父子级关系的标签，可以用 > 比如 ul > li就可以了
如果有兄弟关系的标签，用 + 就可以了比如 div+p
如果生成带有类名或者id名字的，直接写 .demo 或者 #two tab 键就可以了
如果生成的div 类名是有顺序的，可以用自增符号 $
$$ 是从 01 开始
如果想要在生成的标签内部写内容可以用 { } 表示
编辑多行，按住AIT键点点点，同时编辑多行。复制的文本行数需要和光标数相等，这样会一一相等对应，标签相等可以用alt + shift +选中。
```
 
```

html笔记黑马pink老师 b站视频笔记有自己新加内容相关推荐

黑马pink老师Web前端入门笔记（二）
Web前端入门二.HTML标签 (一) 学习目标 (二)HTML语法规范 (三) HTML基本结构标签 (四) 开发工具 (五) HTML常用标签 1.语义标签: 2.标题标签(重要): 3.段落和 ...
黑马pink老师前端从入门到精通教程汇总（附源码+配套资料）
本篇内容主要是PINK老师教程汇总(主要内容如下) 1.web端布局:先讲解HTML5常用标签,接着讲解CSS3常见样式增加的H5C3新特性,新语法,最后讲解PC端品优购项目.以及CSS3动画 2d ...
电商平台数据可视化Echarts-Vue项目综合练习(黑马pink老师)学习记录
放假在家没事,跟着b站黑马前端课程手把手做了个电商平台数据可视化实时监控系统.老师课讲得非常好,几乎是保姆级别,对我这种小白非常友好.在这里记录一些自己遇到的问题,欢迎批评指正. 问题记录 1.ECh ...
黑马Pink老师JavaScript新教程上线啦~
今天是你开工的第几天? 是谁在回味假期的美好是谁一上班就困困困是谁身在上班心还在春节假友情提示再坚持4天,就到周末了世间长假难有但周末常在无论是对于学习人还是打工人来说周末都太美好了 ...
一阶段P1~P96（PJavaScript基础语法-dom-bom-js-es6新语法-jQuery- 数据可视化echarts 黑马pink老师前端入门基础视频教程（持续更新）
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 JavaScript笔记计算机编程基础 1. 变量 \color{red}{1. 变量} 1.变量 1. 变量概述 2. 变量的使 ...
HTML+CSS学习笔记（pink老师前端课程笔记--补档）
开始于2021年8月3日09点59分课程学习路线:HTML5-> CSS3->H5C3提高->项目拼优购电商网站仅更新到H5C3提高的C3提高部分(新增选择器),忙于其他事情,暂 ...
黑马pink老师:CSS基础总结Ⅰ
文章目录 CSS基础总结Ⅰ 1.CSS语法规范 2.CSS选择器 2.1基础选择器 2.1.1标签选择器(元素选择器) 2.1.2类选择器 2.1.3id选择器 2.1.4通配符选择器 2.2复合选择 ...
【B站视频笔记】linux 进程间通信（ipc）信号（软中断信号）signal库函数、可靠信号和不可靠信号、信号集sigprocmask（信号掩码、信号递达Delivery、信号未决Pending）
[视频教程]Linux信号详解(可靠信号.不可靠信号.阻塞信号.信号处理函数) [博文]Linux信号文章目录背景课程笔记一.如何让程序在后台运行 1.加"&"符号 ...
UE4-简单的FPS项目制作(B站视频笔记)P1P2
UE4-简单的FPS项目制作来源:B站视频:https://www.bilibili.com/video/BV1Dg4y1b7aA 看视频,记录操作流程,再自己制作一遍,再回顾 P1- 教程内容和方 ...

html笔记 黑马pink老师 b站视频笔记 有自己新加内容

网页