前端HTML+CSS

最新推荐文章于 2024-07-20 18:16:53 发布

Ntonia171

最新推荐文章于 2024-07-20 18:16:53 发布

阅读量547

点赞数 24

文章标签：前端 html css

本文链接：https://blog.csdn.net/weixin_62345213/article/details/139052691

版权

HTML

-----------------------------------------------------------------------------------------------------------------------
HTML5
-----------------------------------------------------------------------------------------------------------------------

1.图片标签：<img>
属性：
src: 指定图像的url (可以指定绝对路径 , 也可以指定相对路径)
width: 图像的宽度 (像素 / 百分比 , 相对于父元素的百分比)
height: 图像的高度 (像素 / 百分比 , 相对于父元素的百分比)
alt:图片加载不出来时，用于展示设置的文字。
title:鼠标悬停在图片上显示设置好的文字。

2.标题标签：<h1></h1> -2-3-4-5- <h6></h6>
效果 : h1为一级标题，字体也是最大的； h6为六级标题，字体是最小的。

3. 水平分页线标签 <hr>

4.html 文件创建好之后，在其中输入 !，然后直接回车，就可以生成 HTML 的基础结构标签。
主题标签：<title></title>

5.超链接标签：<a herf="" target=""></a>
属性：
href: 指定资源访问的url
target: 指定在何处打开资源链接
-(_self: 默认值，在当前页面打开)
-(_blank: 在空白页面打开)

6.视频标签：<video></video> 音频标签：<audio></audio>
video属性：
   - src: 规定视频的url
   - controls: 显示播放控件
   - width: 播放器的宽度
   - height: 播放器的高度
audio属性：
   - src: 规定音频的url
   - controls: 显示播放控件

7.换行标签：<br/>
注意: 在HTML页面中,我们在编辑器中通过回车实现的换行, 仅仅在文本编辑器中会看到换行效果,
浏览器是不会解析的, HTML中换行需要通过br标签。

8.段落标签：<p><p/>
如: <p> 这是一个段落 </p>

9.文本格式标签
字体加错 b/strong
字体倾斜 i/em
下划线 u/ins
删除线 s/del

前面的标签 b、i、u、s 就仅仅是实现加粗、倾斜、下划线、删除线的效果，是没有强调语义的。
而后面的strong、em、ins、del在实现加粗、倾斜、下划线、删除线的效果的同时，还带有强调语义。

10.布局标签（盒子）：标签：<div></div> <span> </span>
各标签的特点：
div标签：
   1.一行只显示一个（独占一行）
   2.宽度默认是父元素的宽度，高度默认由内容撑开
   3.可以设置宽高（width、height）
span标签：
   1.一行可以显示多个
   2.宽度和高度默认由内容撑开
   3.不可以设置宽高（width、height）

11.列表与表格标签：
<ul>：标签用于创建无序列表，其中列表项使用圆点、方块或其他符号来表示。
标签中，每个列表项使用 <li> 标签来定义。
例如： <ul> <li>列表项 1</li> <li>列表项 2</li> <li>列表项 3</li> </ul>
ul无序列表、ol有序列表、dl自定义列表
<dl>
   <dt>名词1</dt>
   <dd>名词1解释1</dd>
   <dd>名词1解释2</dd>
</dl>

<table> : 用于定义整个表格, 可以包裹多个<tr>
常用属性如下：
    - border：规定表格边框的宽度
   - width：规定表格的宽度
    - cellspacing: 规定单元之间的空间

<tr> : 表格的行，可以包裹多个 <td>
<td> : 表格单元格(普通)，可以包裹内容 , 如果是表头单元格，可以替换为 <th>

a.合并单元格：
跨行合并：rowspan="合并单元格个数"; 上下
跨列合并：colspan="合并单元格个数"; 左右
b.目标单元格：(写合并代码)
跨行：最上侧单元格为目标单元格，写合并代码。
跨列：最左侧单元格为目标单元格，写合并代码。

12.表单标签：<form></form> 表单域
表单场景: 表单就是在网页中负责数据采集功能的，如：注册、登录的表单。
属性：
action: 规定表单提交时，向何处发送表单数据，表单提交的URL。
method: 规定用于发送表单数据的方式，常见为： GET、POST。
GET：表单数据是拼接在url后面的，如： xxxxxxxxxxx?username=Tom&age=12，url中能携带的表单数据大小是有限制的。
POST：表单数据是在请求体（消息体）中携带的，大小没有限制。
name：表单域名称。

表单项标签:
不同类型的input元素、下拉列表、文本域等。
   - input: 定义表单项，通过type属性控制输入形式
   - select: 定义下拉列表
   - textarea: 定义文本域
注意：表单中的所有表单项，要想能够正常的采集数据，在提交的时候能提交到服务端，表单项必须指定name属性。否则，无法提交该表单项。
<input type="text" name="username">用户名的输入框
<input type="radio" name="选项值">
<input type="submit" value="免费注册"> 可以将表单中的数据传到后台服务器
<input type="reset" value="重新填写"> 将表单输入的数据清除
<input type="button" value="获取手机验证码">
<input type="file"> 文件域，用于上传文件
注意还有value属性（用于规定input元素的值，在表单元素里面的默认值）。
name表单元素的名称，要求单选按钮和复选框要有相同的name值。
checked用于规定输入字段默认选中的值。列如同意用户协议的勾选。
maxlength用于规定用户输入的字符的最大长度。

<label>是input元素定义标注标签</label>
用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器会自动将焦点（光标）跳转到选择对应的表单元素上，以增加用户体验。
语法：
<label for="input(id)">input选型值</label> <input type="radio/text" id="for(label)"></input>

下拉表单：<select>标签
语法：放在form表单域标签内
属性：selected="selected"; 将某一选项值设为默认选项
选项名称：<select>
<option>选项值1</option>
<option>选项值2</option>
<option>选项值3</option>
</select>

文本域标签：<textarea>可以写默认显示的值</textarea> 用于定义多行文本的输入

CSS

-----------------------------------------------------------------------------------------------------------------------
CSS
-----------------------------------------------------------------------------------------------------------------------
CSS规则主要由两个部分组成：选择器以及一条或多条声明。
写在<head></head>标签内
   <style>
   标签选择器 {
               属性1: 值1；
               属性2: 值2；
           }
   类选择器
       .对应属性 {
               属性1: 值1;
               }
   id选择器
       #对应属性 {
               属性1: 值1;
               }
   通配符选择器
               * {
               属性1: 值1;
               }
   </style>
类选择器：body标签中对应标签中用class属性等于类选择器的对应标签即可调用。
类选择器：样式点定义，结构类调用，一个或多个，开发最常用。
id选择器：样式#定义，结构id调用，只能被调用一次，其他标签不可使用。
通配符选择器：不需要调用，自动给所有的元素使用样式。

字体系列：
1.font-family属性定义文本的字体。
列如：font-family: "Microsoft Yahei", Times, 宋体;
注意：1.各种字体之间必须用英文状态的逗号进行分隔。
   2.一般情况下，如果有空格隔开的多个组成的字体，加引号括起来。
   3.尽量使用系统默认自带字体，保证在任何用户浏览器中都能正确显示。
   4.最常见的几个字体：body{font-family: "Microsoft Yahei", tahoma, arial, "Hiragino Sans GB"}

2.字体大小：font-size属性
   1.px（像素）大小是网页最常用的单位
   2.谷歌浏览器默认字体大小为16px
   3.不同浏览器可能默认显示的字体大小不一致，我们尽量给定一个明确值
   4.可以给body标签指定整个页面的字体大小

3.字体粗细：font-weight属性
正常字体大小normal的值等价与400，加粗blod等价于700
注意：这些值后面不需要单位

4.文字样式：font-style：
属性值：normal 默认值，浏览器会显示标准的字体样式
italic 浏览器会显示斜体样式的字体
注意：平时我们很少使用italic属性给文字加斜体效果，反而会对（em，i）标签用normal改为正常样式

5.字体的复合属性：font: font-style font-weight font-size/line-height font-family;
注意：1.使用font属性时，必须按上面语法格式中的顺序书写，不得更换顺序，并且各个属性以空格隔开。
2.不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，
否则font属性会失效。

6.CSS文本属性：
CSS Text（文本）属性可以定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。
color属性：用于定义文本颜色
text-align属性：用于设置元素内文本内容的水平对齐方式
text-decoration属性：规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等
text-indent属性：用来指定文本的第一行的缩进，通常是将段落的首行缩进
               em是一个相对单位，就是当前元素（font-size）1个文字的大小，
               如果当前元素没有设置大小，则会按照父元素的1个文字大小。
               首行缩进两个字符：text-indent: 2em；
line-height属性：用于设置行间距，控制行与行之间的距离。

--------------------------------------------------------------------------------------------------------------------------
emmet语法：
--------------------------------------------------------------------------------------------------------------------------

1. 标签生成：通过输入标签名，可以快速生成对应的HTML标签。例如，输入`div`会生成`<div></div>`。

2. 类和ID：通过`.`和`#`符号可以添加类和ID属性。例如，输入`div.container`会生成`<div class="container"></div>`。

3. 子元素：通过`>`符号可以生成子元素。例如，输入`ul>li*3`会生成一个包含3个li元素的ul列表。

4. 兄弟元素：通过`+`符号可以生成兄弟元素。例如，输入`div+p`会生成一个div元素和一个p元素。

5. 属性：通过`[]`可以添加元素属性。例如，输入`a[href="#"]`会生成一个带有href属性的a标签。

6. 文本内容：通过`{}`可以添加文本内容。例如，输入`p{Hello World}`会生成一个包含文本内容“Hello World”的p标签。

7. 重复元素：通过`*`可以重复生成元素。例如，输入`ul>li*5`会生成一个包含5个li元素的ul列表。

8. 群组：通过`,`可以生成多个元素。例如，输入`h1,h2,h3`会生成三个标题标签。

盒子模型

--------------------------------------------------------------------------------------------------------------------------
盒子模型
--------------------------------------------------------------------------------------------------------------------------
1.边框（border）可以设置元素的边框。边框由边框宽度、样式、颜色三部份组成。
border-width: 数值px;
border-style: solid; 实线边框solid 虚线边框dashed 点线边框dotted
border-color: 颜色;
border-top/bottom/left/right ; 边框宽度px 边框样式边框颜色; 表示对上下左右边框的设置。
border-collapse: collapse; 合并相邻的边框

2.内边距（padding）
padding-top/bottom/left/right: 数值px; 分别设置上下左右的内边距。
padding: 数值1px; 表示上下左右内边距都是数值1px。
padding: 数值1px 数值2px; 表示上下内边距是数值1px，表示左右内边距是数值2px。
padding: 数值1px 数值2px 数值3px; 表示上内边距是数值1px，表示左右内边距是数值2px，
下内边距为数值3px。
padding: 数值1px 数值2px 数值3px 数值4px; 表示上-右-下-左的内边距
（分别表示从上开始，顺时针排到左内边距）
padding不会影响盒子大小的情况：
如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子的大小。

3.外边距（margin）
margin-top/bottom/left/right ; 表示上下左右外边距
外边距可以让块级盒子水平居中，需要满足两个条件：
1.盒子必须指定了宽度（width）。
2.盒子左右的外边距都设置为auto。 margin: 0 auto;

4.display属性用于指定一个元素应该生成何种框模型。
display属性可以取多个不同的值，常见的包括：
   1.block：元素将生成一个块级框，会独占一行，可以设置宽度、高度、内外边距等属性。
   2.inline：元素将生成一个内联框，不会独占一行，只占据内容的空间，不可以设置宽度、高度等属性。
   3.inline-block：元素将生成一个内联块级框，不会独占一行，但可以设置宽度、高度、内外边距等属性。
   4.none：元素不会被显示出来，相当于隐藏元素。

5.背景相关属性：
   1. background-color：用于设置元素的背景颜色。
   2. background-image：用于设置元素的背景图片。
   3. background-repeat：用于设置背景图片的重复方式，可以取值为repeat、repeat-x、repeat-y、no-repeat等。
   4. background-position：用于设置背景图片的位置。
   5. background-size：用于设置背景图片的大小。
   6. background-attachment：用于设置背景图片的滚动方式，可以取值为scroll、fixed等。

6.伪类选择器，用于向特定的元素添加特殊的样式，以响应用户的动作或元素的状态。
   1. :hover：当用户鼠标悬停在元素上时应用样式。
   2. :active：当用户点击元素时应用样式。
   3. :visited：选择已访问过的链接。
   4. :focus：当元素获得焦点时应用样式。
   5. :nth-child(n)：选择元素的第n个子元素。
   6. :first-child：选择元素的第一个子元素。
   7. :last-child：选择元素的最后一个子元素。

7.文本相关属性：
   1. color：用于设置文本颜色。
   2. font-family：用于设置文本的字体系列。
   3. font-size：用于设置文本的字体大小。
   4. font-weight：用于设置文本的字体粗细。
   5. font-style：用于设置文本的字体样式，如斜体。
   6. line-height：用于设置文本行高。
   7. text-align：用于设置文本对齐方式，如居中、左对齐、右对齐等。
   8. text-decoration：用于设置文本装饰效果，如下划线、删除线等。
   9. text-transform：用于设置文本转换效果，如大写、小写、首字母大写等。
   10. letter-spacing：用于设置字符间距。
   11. word-spacing：用于设置单词间距。
   12. text-shadow：用于设置文本阴影效果。

8.块、行、行内快：
   1. 块元素（block）：
   块级元素会独占一行空间，沿着父元素的宽度延伸。常见的块级元素包括 `<div>`、`<p>`、`<h1>` 等。块级元素的特   点包括：
   - 会在页面中独占一行空间。
   - 可以设置宽度、高度、内外边距和边框。
   - 可以包含其他块级元素或行内元素。
   - 默认情况下，块级元素会自动换行。
   2. 行内元素（inline）：
   行内元素会在同一行内显示，宽度只取决于元素的内容。常见的行内元素包括 `<span>`、`<a>`、`<strong>` 等。行内   元素的特点包括：
   - 会在同一行内显示，宽度只取决于元素的内容。
   - 不可以设置宽度、高度，只能设置水平方向的内外边距和边框。
   - 可以包含其他行内元素。
   - 不会自动换行，需要通过设置宽度或者使用换行符来控制换行。
   3. 行内块元素（inline-block）：
   行内块元素会在同一行内显示，同时可以设置宽度和高度。常见的行内块元素包括 `<img>`、`<button>` 等。行内块   元素的特点包括：
   - 会在同一行内显示，可以设置宽度和高度。
   - 可以设置内外边距和边框。
   - 可以包含其他行内元素。
   - 不会自动换行，需要通过设置宽度或者使用换行符来控制换行。

选择器

   1. 标签选择器：通过HTML标签名称选择元素。例如，p选择器选择所有段落元素。
   2. 类选择器：以"."开头，用于选择具有特定类名的元素。例如，.highlight选择所有具有highlight类的元素。
   3. ID选择器：以"#"开头，用于选择具有特定ID的元素。例如，#header选择具有header ID的元素。
   4. 后代选择器：用空格分隔两个选择器，选择第一个选择器的后代元素。
   例如，div p选择所有在div元素内的段落元素。
   5. 子元素选择器：使用">"符号选择直接子元素。例如，ul > li选择ul元素的直接子元素li。
   6. 通配符选择器：使用"*"选择所有元素。例如，*选择所有元素。
   7. 属性选择器：通过元素的属性选择元素。例如，[type="text"]选择所有type属性为text的元素。
   8. 伪类选择器：用于选择元素的特定状态或位置。例如，:hover选择鼠标悬停在元素上时的状态。
   9. 伪元素选择器：用于向元素的特定部分应用样式。例如，::before用于在元素内容前插入内容。

Ntonia171

关注

24
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
前端HTML+CSS

</div>`。常见的行内元素包括 `<span>`、`<a>`、`<strong>` 等。常见的行内块元素包括 `<img>`、`<button>` 等。常见的块级元素包括 `<div>`、`<p>`、`<h1>` 等。例如： <ul> <li>列表项 1</li> <li>列表项 2</li> <li>列表项 3</li> </ul>例如，输入`div`会生成`<div>
复制链接

扫一扫