HTML

块元素

 <!-- 块元素：独占一行，默认宽是100%标题标签：h1-h6段落标签：p盒子：div水平线：hr   没有结束标签-->

标题

通过

–

标签定义

字体大小，文本粗细

<h1></h1>
<h2></h2>

段落

<!-- 段落是通过p标签定义的-->
<p>
</p>

盒子

 <!-- 盒子div用来布局规定内容的区域--><div>这是一个盒子</div>

水平线

<hr>
<!--水平线 hr是一个单标签-->

换行

 <br><!-- br也是一个单标签 -->

行内元素

 <!-- 行内元素：不独占一行，宽高是由内容撑起来的，不可以设置宽高-->

<span>便签span</span>
<!--正常字体-->

文本格式化标签

     <!-- 文本格式化标签：可以使文本具有默认样式的标签字体加粗--><b>123</b><strong>同上加粗</strong><!-- 字体倾斜 --><i>123</i><em>同上倾斜</em><!-- 下划线 --><u>文字加下划线</u><ins>一样有下划线</ins><!-- 删除线 --><s>文字中间删除线</s><del>同上</del> <!-- delete的缩写 -->

图片标签

 <!-- 图片标签src：写图片路径（也可以是网页图片，只需填写网页路径）alt：当图片加载错误或失败是用文字代替wigth="宽度"height="高度"title="当鼠标悬停在图片的时候的提示信息"--><img src="../图片/456.jpg" alt="图片加载错误" wight="800" height="380" title="图片"><!-- 路经总结：当访问同级目录的时候用的是./当访问上级目录的时候用的是../一个../往上跳一级，两个跳两级以此类推--><img src="E:\Download\my\456.jpg" alt="图片加载错误"><!-- 绝对路径 -->

链接标签

 <!-- 链接标签 ‘a’可以跳转到另一个文件去具有默认样式：字体颜色、下划线具有默认事件：刷新页面（当href里面没有写任何东西的时候）href：写的是要跳转的页面路径target：控制是否在本标签页进行跳转_self本标签页跳转_blank新建一个标签页跳转(前面的下划线不能省略)--><a href="http://www.baidu.com" target="_self">点一下跳转到百度</a><!-- 注：在href里写路径要加协议http:// --><!-- 本地跳转 --><a href="./02-图片.html" target="_blank">点击跳转到02</a>

锚点定位

 <!-- 在要定位的目标元素上写上id="xx" --><!-- 在a标签的href写上#xx（这个名字要与目标元素上的名字一致） --><a href="#like" id="top">猜你喜欢</a><!-- #代表id --><!-- 可以直接定位跳转到下面id为like的位置 --><h1 id="like">喜欢</h1><!-- id为like的位置 --><a href="#top">返回顶部</a><!-- 可直接跳转到id为top的位置 -->

特殊字符与图标

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href=""><!-- link能引入外部资源文件 也可改变网页图标rel(relationship单词缩写) 属性规定当前文档与被链接文档之间的关系。--><!-- 添加icon图标 --><link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/x-icon">
</head>
<body><!-- &nbsp;小空格 --><!-- &emsp;大空格 --><!-- &copy;版权© --><!-- &gt;大于 --><!-- &lt;小于 --><span>&gt;</span><span>&lt;</span><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bbvbnnnlasdfbklsvkabkvbksankvsabvkkasnvnalsknkvdnknksjnkln</p>
</body>

列表

无序列表

 <!-- 无序列表ul里面只能有li但是li里可以有任何元素ul和li都是块元素ul上面有一个type属性规定小黑点的样式type=“”circle  空心圆square   实心小方块disc   默认值，实心圆--><ul type="circle"><li>无序列表<br>这是一</li><li>这是二</li><li>这是三</li><li>这是四</li></ul>

有序列表

 <!-- 有序列表ol、li 也是块元素ol里面只能有lili可以包含所有元素在ol上有一个type默认值是从1开始支持Aai  I--><ol type="I"><li>这是一个有序列表1</li><li>这是一个有序列表2</li><li>这是一个有序列表3</li><li>这是一个有序列表4</li></ol>

自定义列表

 <!-- 自定义列表最外层：dl定义列表标题：dt（定义标签定义了定义列表中的项目）内容：dd定义描述--><dl><dt>法师</dt><dd>诸葛亮</dd><dd>貂蝉</dd><dd>干将</dd><dd>嫦娥</dd></dl>

表格

 <!-- 表格table：所有的表格标签必须写在table里caption：表格的标题thead：表格的头部th：表头里面的每一项单元格tbody：表格的主题内容部分，表格的身体tr：表示一行td：表示一个单元格tfoot：表格的页脚，定义表格的底部tr：表示一行td：表示一个单元格--><!-- 表格的属性写在table上的：border：表格的边框cellspacing:单元格与单元格之间的距离width：宽度height：高度wight和height可以写在任何地方align：对其方式（写在table上让表格居中，写在tbody上是让内容居中）left，center，rightcellpadding：单元格与内容之间的距离borderColor：边框的颜色bgcolor：背景颜色rowspan：纵向合并colspan：横向合并--><table border="1"cellspacing="0" wight="800"height="500"align="center"cellpadding="50"borderColor="skyblue"bgcolor="pink" ><!--表格边框为1，单元格之间的距离为0，宽度为800，高度为500，表格居中，单元格与内容之间的距离为50，边框颜色为skyblue，背景颜色为pink--><caption>学生个人信息</caption><!-- 表名 --><thead><th>学号</th><th>姓名</th><th>性别</th><th>年龄</th></thead><tbody align="center"><!-- 内容居中 --><tr><td>01</td><td>小明</td><td>男</td><td>18</td></tr><tr><td>02</td><td>小红</td><td>女</td><td>18</td></tr></tbody><tfoot><tr><td>备注</td><td rowspan="2" colspan="3"></td></tr></tfoot></table>

表单

用来收集用户的信息
表单控件、提示元素、表单域

表单控件：

   包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

提示信息：

    一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。

表单域：

  他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：

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

常用属性：

1. Action在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。
2. method用于设置表单数据的提交方式，其取值为get或post。普及：GET和POST是什么？HTTP协议中的两种发送请求的方法。HTTP是什么？超文本传输协议（Hyper Text Transfer Protocol，*HTTP*）是关于数据如何在万维网中如何通信的协议。
3. name用于指定表单的名称，以区分同一个页面中的多个表单。注意：  每个表单都应该有自己表单域。

form标签上定义请求类型的是哪个属性？定义请求地址的是哪个属性？

form表单定义请求类型的是 method 属性，定义请求地址的是 action属性

input控件（重点）

 <!-- input控件type类型-text：普通文本-password：密码输入框-number：数字输入框（只能输入数字）-email：邮箱-date：日期-radio：单选框-checkbox：复选框-button：普通按钮-reset：重置按钮-submit：提交按钮input的属性-value：表单控件的默认值-name：设置表单控件的名字（当两个单选的name名一致时就可以实现只能选择一个）form：表单域--><table align="center" cellpadding="5"><tbody align="left"><form action="" ><tr><td><div>用户名：<input type="text" name="name"></div></td></tr><tr><td><div>密码：<input type="password" name="password"></div></td></tr><tr><td><div>数字：<input type="number" name="number"></div></td></tr><tr><td><div>邮箱：<input type="email" name="email"> </div></td></tr><tr><td><div>日期：<input type="date" name="date"></div></td></tr><tr><td><div>男：<input type="radio" name="sex" value="1">女：<input type="radio" name="sex" value="2"></div></td></tr><tr><td><div>爱好：<input type="checkbox">篮球<input type="checkbox">足球<input type="checkbox">乒乓球<input type="checkbox">网球</div></td></tr><tr><td><input type="button" value="点击"><input type="reset"><input type="submit"></td></tr></form></tbody></table>

label

 <!-- label:绑定文字和input控件当label标签上的for的名字与控件里的id名字一致时，可以实现点击文本选中控件--><form action="">、<div><label for="name">用户名</label><input type="text" id="name">  </div><div><label for="password">密码</label><input type="pasword" id="password"></div><div><label for="email">邮箱</label><input type="email" id="email"></div><div><label for="man">男</label><input type="radio" id="man" name="sex"><label for="miss">女</label><input type="radio" id="miss" name="sex"></div><div><label for="number">数字</label><input type="number" id="number"></div><div><label for="date">日期</label><input type="date"></div><div><input type="button" value="点击"></div><div><input type="reset"></div><div><input type="submit"></div></form>

value和placeholder的区别

 <!-- input控件上面的属性-value：控件的默认值-placeholder：控件提示信息（占位符）--><form action=""><div>用户名：<input type="text" value="" placeholder="请输入用户名"></div><div>密码：<input type="passowrd" placeholder="请输入密码"></div></form>

文本域

 <!-- textarea：文本域-cols：规定横向的宽度-rows：默认可以输入x行-disabled：禁用文本域-maxlength：规定文本域最大字符数-readonly：只读-name：规定文本区域的名称。--><input type="text"><textarea name="文本" id="" cols="30" rows="10" maxlength="10">65546</textarea>

下拉菜单select

 <!-- 下拉菜单select：-disabled：禁用-multiple：可以选中多个-size：默认可见多少条option：-disabled：禁用-selected：默认为选中状态--><select><option value="">请选择</option><option value="">北京</option><option value="">上海</option><option value="">广州</option><option value="">深圳</option><option value="">杭州</option><option value="">南京</option><option value="">宁波</option></select>

option的value的值的作用是什么？

value 属性规定在表单被提交时被发送到服务器的值。

开始标签与结束标签之间的内容是浏览器显示在下拉列表中的内容，而 value 属性中的值是表单提交时被发送到服务器的值。

css

行内样式

 <!-- 行内样式--><div style="color: greenyellow;">我是greenyellow</div>

内联样式

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 内联样式 --><style>h1{color: red;}</style>
</head>
<body><div><h1>你好</h1></div>

外联样式

 <!-- 写在head里,link可以直接调用css文件设置的格式外联样式href：写入要引入的css文件--><link rel="stylesheet" href="./01-css的使用.css"><!-- 创建css文件-->p{color: hotpink;}/*span{color: darkred;}*/.a{color: #31215789;}
<!-- html文件
--><div><h1>你好</h1></div><p>故乡的梅花开了吗</p><span>自己选择的路在荒谬也要走完</span><br><span class="a">大河之剑天上来</span>

字体总结

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/*字体总结字体大小：font-size：px值字体家族：font-family：“宋体”字体风格：font-style：italic是用来指定使用斜体版本oblique强制将字体倾斜字体粗细：font-weight：单词和数值-单词：bold-数值：100-900100-300细体400-500正常600-900加粗*/h1{font-size: 50px;/*字体大小*/font-family: "楷体";/*字体类型*/font-weight: bold;/*字体加粗*/font-style: italic;/*字体倾斜*/color: greenyellow;/*字体颜色*/}</style>
</head>
<body><h1>标题1</h1>
</body>

line-height行高

<style>div{width: 300px;height: 300px;border: 1px solid black;/*行高*//*line-height: 300px;*//*  当有一行文本的时候line-height的值与自身的高一致时可以达到垂直居中如果有多行文本的时候line-height的值：自身的高（height）/文本的行数*/line-height: 37px;}
</style>
<body><div>65454656515 <br>65454656515 <br>65454656515 <br>65454656515 <br>65454656515 <br>65454656515 <br>65454656515 <br>65454656515</div>
</body>

文本水平对齐方式和字间距

<style>border:1px solid black;/*边框：粗细px 样式 颜色*/text-align:certer;/*text-align:left certer right*/line-height:200px/*line-height行高*/font-size：30px；/*字间距 letter-spacing长度值：用长度值指定间隔，可以为负值px1em为间隔一个字符大小*/letter-spacing: 1em;
</style>

文本的格式

首行缩进：单位px、em

<style>p{text-indent:2em;/*首行缩进：单位是：px、em*/text-decoration:underline;/*文本修饰none：无underline：下划线overline：上划线line-through：删除线，贯穿线blink：设置闪烁的字体，*/}
</style>

选择器

标签选择器

直接使用标签进行命名,如：

<style>p{width:200px;}
</style>

类名选择器

在标签之前加一个点（.）例如：

<style>.biaoqian{height:200px}
</style>

在body里使用的时候，在标签的内部使用class进行引用，例如：

<div class="biaoqian">nihao
</div>

命名规范：

不要使用纯数字、中文进行命名，尽量是用英文字母

尽量不要使用标签作为类名

**注：**类名可以重复使用，一个标签上可以拥有多个类名

类名选择器是用的最多的选择器

id选择器

不可以重复使用，一个标签只能拥有一个id

**#**就代表id，后面紧跟着的就是id的名字

id的优先级比类名高

通配符选择器

选中页面上所有的标签

<style>*{weight:200px;/*页面宽都为200*/}
</style>

过渡，圆角边框

.box{width：300px；height：300px；background-color：red；
}当鼠标放在目标元素上的时候给予的一些样式
.box:hover{background-color:blue;
}background-color：背景颜色
border-radius：30px；边框圆角
transition：all 1s；过渡：一个样式到另一个样式的时间all过度所有属性

css复合选择器

交集选择器

由两个选择器构成，既有标签一的特点，也有标签二的特点

第一个是标签，第二个是类名

<style>/*交集选择器选中了：标签名为h1，并且类名为title1*/h1.title1{color: red;}div.title1{color: blue;}
</style><h1 class="title1">哈哈哈哈哈哈哈</h1><h1 class="title1">哈哈哈哈哈哈哈</h1><h1 class="title1">哈哈哈哈哈哈哈</h1><h1 class="title1">哈哈哈哈哈哈哈</h1><div class="title1">哈哈哈哈哈哈哈</div><div class="title1">哈哈哈哈哈哈哈</div><div class="title1">哈哈哈哈哈哈哈</div><div class="title1">哈哈哈哈哈哈哈</div>

并集选择器

各个选择器通过逗号连接，任何形式的选择器都可以作为并集的一部分

 <style>/*并集选择器由各个选择器，由逗号连接而成，同时选中多个类别的选择器*/.box,.box1,.box2,.box3,.box4{width: 1200px;height: 500px;border: 1px solid black;}</style>

后代选择器

又称包含选择器

用来选择元素或元素组的子孙后代

其写法就是把外型标签写在前面，内部标签写在后面，中间用空格分隔，先写爷爷父亲，后写儿子孙子

<style>.father1,.father2{width: 1000px;height: 500px;}.father1{border: 1px solid black;}.father2{border: 1px solid red;}/*后代选择器精确查找选中某一个元素的直接后代*/.father1 .box1{width: 650px;height: 180px;border: 1px solid orange;}.father1 .box1 .box2{width: 100px;height: 50px;border: 1px solid orangered;}.father2 .box1{width: 650px;height: 180px;border: 1px solid darkorange;}.father2 .box1 .box2{width: 100px;height: 50px;border: 1px solid black;}</style>

标签的显示模式（display）

块元素

独占一行，宽高可以设置

默认宽100%

行内元素

不独占一行，不可以设置宽高

由内容撑起来

行内块元素

既可以设置宽高，也可以排列在一行

标签显示转换（display）

转换成块元素：block

转换成行内元素：inline

转换成行内块元素：inline-block

display:block/*转换成块元素*/
display:inline/*转换成行内元素*/
display:inline-block/*转换成行内块元素*/

元素的溢出处理方式

overflow

检索或设置当前对象的内容，超过指定宽度

overflow: auto;/*visible: 不剪切内容也不添加滚动条auto：超出自动显示滚动hidden：不显示超过尺寸的内容scroll：不管是否超出内容，都显示滚动条*/

css三大特性

层叠性

如果一个css代码中，出现两条相同的属性，后者会覆盖前者

继承性

子标签会继承父标签的某些样式

对于字体、文本属性等网页中通用的样式可以使用继承（字体、字号、颜色、行距等）

并不是所有的css属性都可以进行继承（边框、外边距、内边距、背景、定位、元素等属性）

优先级

！important>行内样式表>ID选择器>类选择器>标签选择器>通配符>继承的样式>浏览器默认样式

     .box1{width: 200px;height: 200px;border: 1px solid black;color: red;}/*box1-son继承了box的color属性*/.box1 .box1-son{width: 100px;height: 100px;border: 1px solid red;}/*优先级！important>行内样式表>ID选择器>类选择器>标签选择器>通配符>继承的样式>浏览器默认样式*/.text{display: inline-block;width: 200px;height: 200px;border: 1px solid black;color: red;}/*当前id选择器的权重比类名选择器的权重高，所以css应用了id选择器的样式*/#txt{display: inline;color: purple;}

链接伪类选择器

-:link 未访问的链接

-:visited 已访问的链接

-:hover 鼠标移动到元素上

.box:hover .box1{height: 120px;width: 100px;background-color: orange;}
当鼠标放在box上时，box1也会变化

-:active 生效于被激活的状态

样式塌陷

当行内块元素行高不一致或者文本行数不一致就会造成塌陷

背景样式

background-image：url（）背景图片
background-repeat：背景图片是否重复repeat-x：横向重复repeat-y：纵向重复no-repeat：不重复
background-size：背景图片大小像素值百分比
background-position：控制背景图片的位置像素值x:正值往右 负值往左y:正值往下 负值往上单词：水平：left center right垂直：top center bottom百分比

<style>.jin{width: 236px;height: 128px;/*border: 1px solid black;*/background-image: url(../图片/index.png);background-repeat: no-repeat;background-position:0 -219px;}/*精灵图定位 position后面x y*/
</style>

背景附着

background-attachment:scroll：默认值fixed：背景固定

背景透明

background-color：rgba（0，0，0，1）
前三个是颜色的数值
第四个值是透明度：0-1

背景图片的尺寸

background-size：
a) 可以设置长度单位(px)（img大小一样）或百分比（设置百分比时，参照盒子的宽高）
b) 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。
c) 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。

**注：**background-size属性一定要写在background属性后面。

盒子模型

列表属性

list-style属性：简写在一个声明中设置所有的列表属性list-style-type：none：无标记disc：默认实心圆cirle：空心圆square：小方块list-style-position：inside：列表项目标标记放在文本以内，且环绕文本根据对齐ouside：默认值，保持标记在文本的左侧，放在文本以外list-style-image：url（）url图片位置

css盒子模型本质上是一个盒子，封面周围的HTML元素，包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。

边框属性

border：1px solid red；none：无solid：实线dashed：虚线dotted：点线double：双实线transparent：透明单独设定border-top：border-right：border-bottom：border-left：

将不需要方向的border设置为透明（transparent），就可以用来实现三角形
#box{width:0px;height:0px;border-top: 20px solid red;border-right:20px solid transparent;border-bottom:20px solid transparent;border-left:20px solid transparent;
}

边框圆角

border-radius：边框圆角百分比像素值border-radius：左上角 右上角 右下角 左下角

background: linear-gradient(to bottom,pink,skyblue);
渐变颜色，向底部渐变，transition：all 10s；
变化时长10s，transform：rotate（3600deg）；
旋转3600转

内边距padding

padding：上 右 下 左；
padding：上 左右 下；
padding：上下 左右；
padding：上下左右；单独控制各个方向
padding-top：-right：-bottom：-left：

外边距margin

margin：上 右 下 左；
margin：上 左右 下；
margin：上下 左右；
margin：上下左右；单独控制各个方向
margin-top：-right：-bottom：-left：让盒子在网页中水平居中
margin：0px auto；
自动

网页布局的基本理念

每次写网页都要先清除网页的默认样式标签默认的内外边距

*{margin：0px；padding：0px；
}
ul，ol{list-style-type：none；
}

盒子阴影

box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色  内/外阴影；

浮动

浮动：让盒子从普通流中浮起来，不占用之前的位置floatleft左right右/*clear: both;*//*清除浮动带来的影响*/谁受影响清谁

定位position

相对定位relative

相对定位：position：可以控制任何元素relative相对定位absolute绝对定位fixed固定定位相对定位：相对于自己原来的位置进行移动；占用自己原来的位置且不脱离标准文档流；要搭配两个方向-top-right-left-bottom加层级：z-index：-1；

绝对定位absolute

绝对定位：在父级元素没有相对定位的情况下，相对于浏览器窗口进行定位在父级元素有相对定位的情况下，相对于已有定位的父元素进行定位不占用自己原来的位置，脱离标准文档流子绝父相：父级用相对定位，子级用绝对定位要搭配两个方向-top-right-left-bottom

当display的属性值为none时会把一个元素进行隐藏不占用之前的位置

再次显示的时候只需将display的属性值改为block即可

固定定位fixed

根据浏览器窗口进行定位不占用原来的位置，脱离文档流

css 常用设置

鼠标的样式cursor

cursor：default；默认小白
-pointer小手
-move可拖动
-text文本
-not-allowed禁用

轮廓outline

outline-color：颜色
outline-style：风格：solid：实线 dashed：虚线dotted：点线double：双实线transparent：透明
outline-width：宽度

可以配合input使用
outline：颜色风格宽度；

#txt{resize:none;outline:none;//禁止文本域拖动
}

vertical-align垂直对齐

用来控制图片与文字的对齐方式
vertical-align：baseline默认值放在父元素的基线上，也就是顶线top把元素的顶端放在与图片顶端一致的地方middle把此元素放在父元素的中部

visibility可见性

visibility：hidden对象隐藏

visble对象可视

文字溢出text-overflow

text-overflow文字溢出时显示的状态
clip默认值
ellipsis省略号需要配合其他的使用：
强制显示一行文本
white-space：nowrap；不换行
超出部分隐藏
overflow：hidden；
text-overflow：ellipsis；隐藏的部分用省略号代替

Web前端HTML-CSS学习笔记相关推荐

Web前端 html css学习笔记（更新）
HTML CSS学习笔记 2021/9/29 网页简介 HTML简介第一个网页自结束标签和注释文档声明进制字符编码完整的文档结构 2021/9/30 VScode安装及使用实体 meta ...
好程序员web前端分享Nodejs学习笔记之Stream模块
好程序员web前端分享Nodejs学习笔记之Stream模块一,开篇分析流是一个抽象接口,被 Node 中的很多对象所实现.比如对一个 HTTP 服务器的请求是一个流,stdout 也是一个流.流 ...
web前端html5+css3学习笔记(1)
开启我的第一篇博客~~~ 记录学习html+css的笔记目录一.认识两位先驱二.计算机的组成 1.硬件 2.软件三.浏览器与内核四.网页标准五.HTML历史* 一.认识两位先驱图灵:人工 ...
web前端+HTML5+CSS3学习笔记
文章目录 HTML认知网页的基本组成和本质 HTML初始概念 HTML标签学习 HTML基础列表表格表单语义化标签字符实体 CSS基础基础认知选择器文字字体 Emmet语法 CSS进 ...
WEB前端--SEO优化学习笔记（9）
1.seo是什么大家口中的SEO(Search Engine Optimization),中文翻译为"搜索引擎优化",从本质上来说,其实就是如何迎合搜索引擎的规则,使得网站在搜索 ...
web前端html5+css3学习笔记(3)——标签
目录一.排版标签 1.标题标签 2.段落标签二.语义标签三.块级元素和行内元素 1.块级元素 2.行内元素四.文本标签 1.常用文本标签 2.不常用文本标签五.图片标签六.相对路径与绝对路 ...
【前端】CSS 学习笔记（重要）
视频链接:https://www.bilibili.com/video/BV14J4114768 简写语法先安装 Mithril Emmet 插件 (webstorm自带) css 单位 p → % ...
Web前端技术开发学习笔记(HTML标记语言篇)——第4章文字与段落标记
第4章文字与段落标记第4章文字与段落标记 4.1文字标记 4.1.1 文字内容的输入 1.普通文字的输入 2.空格的输入 3.特殊文字的输入 4.注释语句 4.1.2 对文字字体的设置 4.1. ...
前端入门css学习笔记（十七）-----二级菜单
二级菜单的方法就是在一个<ul><li>中再嵌套一个<ul><li> 如下: <ul class="box"><l ...
B站coderwhy前端html+css学习笔记 day10
一.cursor 可以设置鼠标指针在元素上面时的显示样式 1.常见设值 auto: 浏览器根据上下文决定指针的显示样式,比如根据文本或者非文本切换指针样式 default: 箭头效果 pointer ...

Web前端HTML-CSS学习笔记

HTML

块元素

标题

–

标签定义

段落

盒子

水平线

换行

行内元素

文本格式化标签

图片标签

链接标签

锚点定位

特殊字符与图标

列表

无序列表

有序列表

自定义列表

表格

表单

input控件（重点）

label

value和placeholder的区别

文本域

下拉菜单select

css

字体总结

line-height行高

文本水平对齐方式和字间距

文本的格式

选择器

标签选择器

类名选择器

id选择器

通配符选择器

过渡，圆角边框

css复合选择器

交集选择器

并集选择器

后代选择器

标签的显示模式（display）

块元素

行内元素

行内块元素

元素的溢出处理方式

overflow

css三大特性

层叠性

继承性

优先级

链接伪类选择器

样式塌陷

背景样式

背景附着

背景透明

背景图片的尺寸

盒子模型

列表属性

边框属性

边框圆角

内边距padding

外边距margin

网页布局的基本理念

盒子阴影

浮动

定位position

相对定位relative

绝对定位absolute

当display的属性值为none时会把一个元素进行隐藏不占用之前的位置

固定定位fixed

css 常用设置

鼠标的样式cursor

轮廓outline

vertical-align垂直对齐

visibility可见性

文字溢出text-overflow

Web前端HTML-CSS学习笔记相关推荐

最新文章