html:超文本标记语言笔记

!+回车可以快捷出框架

文本

水平线 <hr>

换行

strong/b 加粗

del/s 删除线

<mark> 高亮

bgcolor="pink" 框内颜色

H2O下小

x2上小

h123456为第几级标题最多六级

为正文或标题前面加《marquee》是滑动scrollamount可以调整移动速度

p是段落

图像

img是引用对象的

src=""中

a是超链接

1.可以直接跳到网址

2.在本地不同html文件之间进行跳转

3.锚链接 跳转到当前页面指定位置

href=""里面填网址/绝对地址/相对地址/锚点href="#i'd'"

相对路径:相对于当前文件所在位置(当前文件所在的文件夹)的路径

绝对路径:从盘符开始知道找到文件为止

a标签所有的属性全部必须选中a自身

target

id全局属性

在同一html文件中标签的id不能重复

id是锚链接的基础

音频/视频导入

视频poster=""设置封面图

列表链接

iframe

把一个网络页面或本地页面嵌套到当前页面

frameborder表示边框 0表示没边框 1有边框

​

​

表单form

​表单元素的父元素​

action: 指定表单数据提交的服务器地址的。 #：当前页面

method: 指定http请求方式 get(默认值) post

隐藏元素 hidden

tabindex 0:按照html结构获取焦点 tab

按照你指定的顺序进行tab遍历 直接用正数 第几个出现就输几

如果不想让他进行tab便利就输-1

​​

</form>

画了一个区域，一个写表单的区域，一个手机用户信息的区域

普通文本输入框

require 必填项

input type属性（切换输入框具体形态）：text

value：表示输入框的值（一直在）

placeholder="请输入5个字符长度的昵称" 提示字

普通文本输入框：<input type="text"maxlength="5"placeholder="请输入5个字符长度的昵称"name="昵称">

密码输入框：<input type="password"placeholder="请输入密码"name="mima">

type="email" 只能输email属性 type="number"数字等等

例如<input type="color">D:\桌面\云计算\11.25.html

<input type="datetime-local">

<input type="date">

<input type="number">

contenteditable="true"指定内容可编辑的形式

spellcheck=“false” spellcheck=“true” 是否打开拼写检查

单选

单选性别<label><input type="radio"name="性别"value="男">男</label><label><input type="radio"name="性别"checked value="女"/>女</label>

扩大选中作用域 label 例如<input type="" id=""><label id="">男</label>

checked="checked" 为默认勾选

多选 type="checkbox"

多选你的爱好是？？<label><input type="checkbox"name="爱好"value="吃饭">吃饭</label><label><input type="checkbox"name="爱好"value="睡觉">睡觉</label><label><input type="checkbox"name="爱好"value="打游戏">打游戏</label>

大长输入框

/><textarea placeholder="输入内容"style="width: 160px;height: 160px;"name=""></textarea>

文件上传

multiple同时选中多个文件 accept限制文件传输的性质

<input type="file"name="文件"multiple accept=".pdf">

下拉选项

​

​

<option disabled selected selected>===你最喜欢的城市===</option> ​ 子项中不写value 提交数据时子项内容是什么值就是什么 multiple让下拉菜单多选 如果写了value 选中的子项就是最终提交的值 selected默认选中下拉菜单的选项

<option value="龙门">龙门</option> <option value="南京">南京</option> <option value="杭州">杭州</option> <option value="维多利亚">维多利亚</option> </select>

按钮

<input type="button"value="登录">按了不提交的

<input type="submit"value="登录">

disabled禁用

新的提交按钮

属性

name属性 给标签的名字 单选选项name属性的属性值必须一样

有语义的结构化标签属性

.<section>

​

导航栏部分

​​

侧边

​

</section>

.<div></div>独占一行 划出一片区域 没有任何语义

class ：类 全局属性 拥有相同样式的属性的组名

同一个页面，多个元素的class可以相同

同一个元素，可以存在多个class的属性值，多个属性值之间 空格隔开

< span>标签</span> 为了后期配合css为单独文字，单独的一份内容添加特殊的样式

title属性 全局属性 给元素（标签）添加额外信息

如果属性不够用了，可以自定义属性

data-xxx 自定义属性配合自己的js实现某些功能

css的引入方式

1.行内引入 全局属性style

​

这是一个盒子容器

​

正常的大小

2.内嵌css 在指定位置吧css写在一对style标签里面

<style> css样式 css注释符号的样式 选择器{ ***** } div{ color: aquamarine; } </style>

3.引入css程序

<link rel="stylesheet" href="./css的引入方式.css" />

rel是表示你引入进来的文件和当前文件的关系

link与@import区别

link是html文件 @import css语法

兼容性

css字体相关样式

<style> /* 字体大小 */ div{ /* font-size 数值px */ font-size: 20px; /* 默认字体大小为16px */ /* 字体的粗细 font-weight normal（400） bold (加粗700)*/ font-weight: 700; /* 字体倾斜 */ font-style: italic; /* font-family:"默认字体","备用字体" 默认字体没有时用备用字体*/ font-fmily: "隶书"; text-decoration:line-through; ​ } ​ p{ ​ /* 行高 */ ​ line-height: 100%; ​ } </style>

css字体的复合属性

<style> p{ /* font:[font-style][font-weight] font-side/[line-height]"font-family"顺序不能改所以不建议*/ font: italic 700 30px/40px "隶书"; } </style>

文本缩进

<style> /* test-indent */ p{ /* 默认一字符16px 2*16px=32px */ /* text-indent: 32px; */ /* em 1em就是一个当前字符大小 */ text-indent: 2em; ​ } ​ </style>

元素

<style> div{ /* 设置元素宽度高度 */ /* width: 400px; */ width: 500px; /* 百分比 父盒子的宽度百分比 */ background-color: aqua; height: 500px; line-height: 700px; text-align: center; } img{ ​ width: 250px; ​ height: 250px; ​ } ​ </style>

<style> h1{ /* 水平对齐方式 test-align 控制内部的元素水平居中对齐*/ text-align: center; } </style>

单行文字垂直居中

<style> p{ /* text-decoration:[线条类型][线条的具体样式][线条的颜色][线的厚度] [线条类型]underline（下划线）overline(上划线)none（无）line-through(删除线) [具体样式]dashed[虚线]dotted[点线]double[双实线]wavy[波浪线]*/

text-decoration: line-through wavy ; ​ } ​ </style>

选择器

不同选择器，权重不同，不论书写位置在哪里，权重大的优先

层叠行：选择器的权重相同时靠近下面的优先

配合style一起

1.基本选择器

1.标签选择器

标签名{

属性：值；}

2.id选择器

#id值{

属性：属性值；}

3.类选择器

.class值{

属性：值；}

4.通配符选择器 匹配到当前页面所有元素 优先级最低

*{}

组合选择器

子代选择器：

选中的是亲儿子

父选择器>子代选择器{}

后代选择器：

选中父元素下面所有的满足要求的后代(嵌套在父元素里面的)

后代选择器 子代选择器{}

逗号选择器：

一次选中多个元素，用不同的选择器

选择器1，

选择器2，

选择器3{}

兄弟选择器：

div+h1{}紧挨着div且是h1的标签

div~h1{} 找div下面所有为h1的兄弟标签

伪类选择器：

访问前后，鼠标悬停时鼠标点击时

1.制作用与a标签 link没有进行访问时

.a2:link{

background-color: crimson;

}

2.:visited 已经被访问的a

.a1:visited{

background-color:blue;

}

3.鼠标悬停时 hover

.a1:hover{

background-color: aqua;

}

4.:active:鼠标点击后没起来

.a1:active{

font-size: 30px;

}

表单伪类选择器：

checked 选中已经被选则的表单的元素

input:checked{

width: 30px;

}

read-only选中只能读不能修改的表单

input:read-only{

background-color: blue;

}

获取焦点时

input:focus{}

结构伪类选择器：

1.ul下面第一个子元素并且是li的标签

.ul1 li:first-child{

background-color: darkolivegreen;

}

2.最后一个

.ul1 li:last-child{

background-color: aqua;

}

3.nth-child 默认对父元素下面所有子元素从一开始编号 2n表示偶数 2n+1表示奇数

.ul1 li:nth-child(4){

background-color: red;

}

4.root选择文档根元素

:root{

background-color: pink;

}

在你的元素前面插入一个动态标签

div::before{

content: ">>>";

color: yellowgreen;

font-size: 30px;

}

后面

div::after{

content: "<<<";

color: yellowgreen;

font-size: 40px;

}

选中的元素

div::selection{

background-color: brown;

}

属性选择器：

data-a div[data-a="tast"]

css层叠性与选择器权重说明

权重计算方式：a,b,c,d（从左到右依次比较，左侧数值大则权重高）

a: 内联样式（style属性） = 1,0,0,0

b: ID选择器 = 0,1,0,0

c: 类选择器、属性选择器 = 0,0,1,0

d: 元素选择器 = 0,0,0,1

!important 可以提高单个样式的优先级，使其覆盖所有其他选择器

选择器的优先级

a,b,c,d 比较方式从左往右，比较

内联样式（style全局属性） a=0 1，0，0，0

id选择器 b=1 0，1，0，0

类选择器、属性选择器 c=0 0，0，1，0

元素选择器 d=0 0，0，0，1

！important提高单个样式的优先级

style中

背景图片

background-image ：url（"背景图片的地址"）

默认是平铺 占满屏幕整个容器的

背景图片是否平铺 重复 no-pepeat 不重复 background-repeat: no-repeat;

repeat-x x轴重复y相似 background-size: contain;

auto 保持图片原有比例

cover 让背景图拉伸，直到占满整个背景

contain 等比例拉伸图片，使得适配容器

背景图片的位置 background-position background-position: right top; background-position: 20px 50px;

背景附着方向 默认滚动 background-attachment: scroll;

把背景固定于可视区 background-attachment: fixed;

背景的复合属性 background:[color] [image] [repeat] [attachment] [position]/[size]

border

边框：用来隔离元素内部和元素外部的 border

border-width: 2px;

border-style: double;

边框的颜色 border-color: red;

边框的复合属性 顺序没有严格的要求 border: 1px solid green;

border-bottom-left-radius: 50%;

外边距

外边距：其他元素距离我的距离

margin\padding的属性值除了直接给px之外，可以选择给百分比。

不论设置的是那个方向的padding或者margin，使用的百分比参照都是父元素的width的百分比

margin-top: 30px;

margin-left: 40px;

margin-right: 20px;

margin-bottom: 100%;

上：10px 左右：20px 下：30px margin:10px 20px 30px;

顺时针 margin:10px 20px 30px 40px

外边距问题解决

1.相邻的元素之间外边距的合并问题

父盒子添加边框 ,或者添加padding

2.overflow: hidden;

margin

margin-left: auto margin-right: auto;

margin还可以取值：auto 只能用于水平方向(自适应) 让元素水平居中

ie盒子模型

box-sizing: border-box; 把你的盒子变成了ie盒子模型

html标签的默认显示模式

元素的显示模式是可以进行更改的 displa

inline-block 行内块元素

inline：行内元素

block : 块元素

元素不显示，并且不会占据原来的位置 none:隐藏元素

display: inline-block

行内元素：（a、span）

1、不会独占一行

2、无法设置宽高

3、只能生效水平方向的内外边距

4、内部只能嵌套文字或者行内元素

块元素：（div、h1~h6\p\）

1、独占一行（父元素的）

2、可以设置宽高

3、可以设置内外边距

4、内部可以嵌套任何元素

行内块元素：(input\img\textarea)

1、不会独占一行

2、可以设置宽高

3、可以使用内外边距

继承性

能够继承的属性：font、color、不会影响布局的属性都是可以继承的

float

让img标签进行左浮动 float: left;

float 浮动 正常情况下，html按照从上到下，从左到右的顺序进行元素排列，正常的文档流

浮动之后的元素会脱离文档流，原来的位置不再保留，下面的元素会无视它

float布局的问题

子元素全部浮动之后，父盒子的高度会存在塌陷的问题

1.添加overflow overflow: hidden;

2、额外标签清除浮动清除所有浮动

flex布局

弹性盒子：对父盒子添加也定的属性，把它变成弹性盒子。默认内部的子元素，会沿着主轴方向排列成一行

项目：天性盒子内部的子元素，称之为项目

主轴：默认是视屏方向，从左往右。弹性盒子里面的项目默认沿着主轴方向排列成一行

交叉轴：与主轴交叉，对应。

display: flex; 让元素变成弹性盒子

更改弹性盒子主轴的方向

flex-direction: row-reverse; 轴方向从右-》左

flex-direction: column; 主轴方向从上-》下

flex-direction: column-reverse; 主轴的发那个像从下=》上

flex-direction: row ; 默认就是这个值

项目在主轴上的对其方式

justify-content: flex-start;

justify-content: flex-end;

justify-content: center;

左右紧贴弹性盒子，剩余项目平分间隔

间隔平分在每个项目的左右两边

justify-content: space-around;

justify-content: space-evenly;

justify-content: space-between;

交叉轴对其方式 项目没有高度的时候，默认拉伸填满整个交叉轴

align-items: stretch;

align-items:flex-end;

align-items:flex-start;

align-items:center;

flex-wrap: wrap; 让弹性盒子支持换行

多行项目交叉轴的对齐方式

align-content: space-between;

align-content: space-around;

grid布局

display: grid; 把元素变成网格容器

grid-template-rows: 100px 200px ; 设置行2*2

grid-template-columns: 100px 100px 300px;

grid-template-columns: repeat(重复的次数,重复的值);

grid-template-columns: repeat(3,100px);

grid-template-columns: auto 200px auto;

grid-template-columns: 1fr 2fr 3fr;

单元格与单元格之间的间距

row-gap: 20px;

column-gap: 20px;

gap: 20px;

justify-content: space-between; 水平对齐方式

align-content: space-between; 垂直对齐

1fr ： flex:1;剩余内容的一份

告诉它起始的行网格线、列网格线

grid-row-start: 1;

grid-row-end: 3;

grid-column-start: 3 ;

grid-column-end: 4 ;

grid-row: 1/3;

grid-column: 2/4;

区域命名

指定元素放的区域名 grid-area: footer;

grid-template-areas:

"header header header"

"aside main right"

"aside footer footer"

定位

静态定位

默认的元素排列

position: static;

相对定位

相对于元素本身的位置进行的定位,定位之后的元素原来的位置一九保留，不会脱离文档流

position: relative;

四个方位名词： top:20px; 距离参考定位的元素的顶部20px bottom:20px; right left

top: -20px;

绝对定位

子绝父相：如果子代设置了绝对定位，那么会一次寻找拥有相对定位的父代，只要找到拥有相对定位的父代，那么绝对定位就相对于该父代定位

查找是由内到外

如果父代全部没有相对定位，那么相对于浏览器的可视区域进行定位

position: absolute;

显示的优先级 （整数 （负数 0 正数）） z-index: 1;

固定定位

会脱离文档流

相对于浏览器的可视区域

页面滚动，位置不变

position: fixed;

粘性定位

position: sticky;