WEB前端（一）

最新推荐文章于 2021-12-30 09:50:41 发布

zkw_sunflower

最新推荐文章于 2021-12-30 09:50:41 发布

阅读量233

点赞数 1

分类专栏：知识整理文章标签： html css

本文链接：https://blog.csdn.net/zkw129/article/details/112271634

版权

知识整理专栏收录该内容

9 篇文章 0 订阅

订阅专栏

HTML

HTML(Hyper Text Markup Language): 超文本标记语言
超文本: 超级文本、超过文本（其中可以包含除了文本以外的其他数据，例如图
片、音频、视频等各种格式）
**标记：**也叫标签、元素、节点等，就是用尖括号(<>)括起来的一组内容。

HTML结构详解

文档声明：<!doctype html>
根标签：< html>< /html>
头部分：< head>< /head>
体部分：< body>< /body>
预防网页乱码： < meta charset=“utf-8”/>

HTML标签

图像标签

<img src="指定图片的地址" alt="代替图片显示的文本" width="图片的宽度" height="图片的高度"/>

超链接标签

<a href="指定点击超链接后将会跳转到的地址" target="指定以何种方式打开超链接">这里可以包裹文本或图片</a>

表格标签
table: 定义一个表格
tr: 定义表格中的行
td/th: 定义表格中的单元格, th用于定义表头中的单元格,其中的文本默认加粗并居中
table上的html标签属性:
border(边框), cellspacing(指定边框和单元格之间的距离), cellpadding(指定单元格边框和内容之间的距离)bgcolor(背景颜色), bordercolor(边框颜色), align(设置排列方式,left/center/right)

<table><!-- 用于在网页中定义一个表格 -->
    <tr><!-- 用于定义一个表格行 -->
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
    </tr>
    <tr>
        <td>11</td><!-- 用于定义一个单元格 -->
        <td>12</td>
        <td>13</td>
    </tr>
    <tr>
        <td>21</td>
        <td>22</td>
        <td>23</td>
    </tr>
    <tr>
        <td>31</td>
        <td>32</td>
        <td>33</td>
    </tr>
</table>

表单标签
表单标签的作用: 用于向服务器提交数据, 此外在超链接或者url地址的后面拼接参数也可以向服务器提交数据!

<form action="指定表单的提交地址" method="指定提交方式"></form>

表单项标签

<input type="text" />

b) 密码输入框: (比如:密码/确认密码等)

<input type="password" />

c) 单选框: (比如:性别/部门等)

<input type="radio" />

d) 多选框:(比如:爱好/岗位等)

<input type="checkbox" />

e) 按钮:(比如:换一张图片)

<input type="button"/>

f) 提交按钮:(比如:提交/注册/登录)

<input type="submit"/>

g) 下拉选框:
select用于定义一个下拉选框
option用于定义下拉选框上的选项
selected设置当前option选项默认被选中

<select>
    <option selected="selected">xxx</option>
</select>

h) 多行文本输入框：
cols属性: 用于设置文本输入框的列数(宽度)
rows属性: 用于设置文本输入框的行数(高度)
placeholder属性: 设置输入框中的提示消息!

<textarea cols="列数/宽度" rows="行数/高度" placeholder="请输入描述信息..."></textarea>

表单细节
1、提交表单时，表单中的数据为什么没有被提交？
对于表单中的表单项标签，只要是需要向服务器提交数据，该表单项上必须添加name属性；如果表单项标签上没有name属性，在表单提交时，该项将会被忽略。

<input type="text" name="username"/>
<input type="password" name="psw"/>

2、如何让多个单选框只能有一个被选中？
要求多个单选框必须具有相同的name属性值，如果多个单选框name属性值相同，则说明是一个组的内容，一个组中的单选框只能选择其中的一个！

<td>性别:</td>
<td>
    <input type="radio" name="gender"/>男
    <input type="radio" name="gender"/>女
</td>

3、为什么单选框、复选框选择某一项后提交的值都是on?
因为单选框、复选框只能选择，不同于用户名、密码输入框，可以输入内容。因此我们需要通过value属性为单选框或复选框设置提交的值(如果不设置默认值都是on)

<input type="radio" name="gender" value="male"/>男
<input type="radio" name="gender" value="female"/>女

4、如何设置单选框或复选框默认选中某一项?
可以在单选框或复选框标签上添加一个checked="checked"属性，就可以让当前单选框或复选框默认被选中。

<input type="radio" checked="checked" name="gender" value="male"/>男
<input type="radio" name="gender" value="female"/>女
<!-- 爱好复选框/多选框 -->
<input type="checkbox" name="like" value="basketball"/>篮球
<input type="checkbox" checked="checked" name="like" value="football"/>足球
<input type="checkbox" name="like" value="volleyball"/>排球

5、如何设置下拉选框默认选中某一项?
在option标签上添加一个selected="selected"属性，可以让当前option选项默认被选中。

<select name="city">
<option>北京</option>
<option>上海</option>
<option selected="selected">广州</option>
<option>深圳</option>
</select>

6、下拉选框中option选项上的value属性的作用是什么？
如果某一个选项被选中，并且该选项上添加了value属性，在提交表单时，将会提交value属性的值。
如果某一个选项被选中，该选项上没有添加value属性，在提交表单时，将会提交标签中的内容

<select name="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option selected="selected">广州</option>
<option>深圳</option>
</select>

CSS

CSS: 层叠样式表，用于修饰、渲染网页的一门技术
使用css样式修饰网页，可以实现将设置样式的css代码和展示数据的html代码进行分离，增强了网页的展示能力！
在HTML中引入CSS
方式1：通过style属性引入css（不推荐）

<div style="border:2px solid red;font-size:26px;background:pink;">这是一个div...</div>

**方式2：**通过style标签引入css

<head>
<meta charset="utf-8">
<style type="text/css">
    /* ****** CSS样式 ****** */
    span{ /* 为当前html中的所有span标签设置样式 */
        border:2px solid green;
        font-size:30px;
        font-weight:bolder; /* bold/bolder */
        }
</style>
</head>

**方式3：**通过link链接引入外部的css文件

<link rel="stylesheet" href="demo.css" />

CSS选择器

所谓的选择器就是能够在html中帮助我们选中元素进行修饰的一门技术。
标签名选择器
格式: 元素名/标签名{ css样式… }
通过元素名称(或标签名称)选中指定名称的所有标签

span{ /* 选中所有的span元素 */
background-color:#efbdef;
font-size: 22px;
font-weight: bolder;
}

class选择器
格式：.class值{ css样式… }
可以为元素添加一个通用的属性 – class，通过class属性为元素设置所属的组，class值相同的元素则为一组。通过class值可以选中这一组的元素，为元素添加样式。
另外，一个元素也可以设置多个class值，多个class值中间用空格分隔

.s1{ /* 选中所有class值为s1的元素 */
    background: #faf77b;
    border: 2px solid cyan;
    }
.s2{ /* 选中所有class值为s2的元素 */
    background: #5eff1e;
    color: #ec0e7e;
    }

内容补充：选择器优先级顺序：
（1）如果是同一类选择器，同时给某些元素设置了样式，如果样式冲突了，那么写在后面的样式会覆盖前面的样式。
（2）如果是不同的选择器，设置的样式优先级顺序是：id选择器(100) > 类选择器(10) > 元素名选择器(1)

id选择器
格式：#id值{ css样式 }
通过标签上通用的属性id，可以为标签设置一个独一无二的编号（id值应该是唯一的），通过id值可以唯一的选中一个元素。

#p1{ /* 选中id值为p1的元素 */
    font-size:24px;
    color: #a06649;
    text-indent: 20px;
}

后代选择器
格式: 祖先后代{ css样式… }
选中指定元素内部的指定后代元素

p span{ /* 匹配所有p元素内部的所有span元素 */
    font-size:18px;
    color: red;
    background: pink;
}/* p,span{} 匹配所有的p元素和所有的span元素 */

匹配的标签：

<p id="p1">
    这是一个p元素!!!
    <span>这是一个span元素!!!</span>
</p>

属性选择器
**格式：**选择器[属性条件]…{ css样式 }
在选择器选中元素的基础上，根据元素的属性条件筛选/过滤元素

input[type='text']{ /* 匹配所有的input并且type值为text的元素 */
    background: #FF7CCC;
    font-size: 22px;
    text-indent: 15px;
}
input[type='text'][name='email']{
    /* 选中所有的input并且type值为text、并且name为email的元素 */
    background : yellow;
}

常用属性

文本属性
text-align ：设置元素内的文本水平对齐方式，其常用取值为

left: 默认值。左对齐
right: 右对齐
center: 居中对齐
justify: 两端对齐

**text-decoration ：**设置文本的下划线样式，其常用取值为:

underline: 有下划线
none: 没有下划线

**text-indent ：**设置文本首行缩进，单位: 像素/百分比
**letter-spacing ：**设置字符间隔/间距，其常用取值为:

normal
像素值

**text-shadow ：**设置字体阴影，其取值为:

像素值 像素值 像素值 颜色值
第一个值为阴影水平位移，第二个值为阴影垂直位移，第三个值为阴影扩散值，第四个值为阴影颜色

字体属性
font-size ：设置字体大小
font-weight ：设置字体粗细 normal、bold、bolder 100/200/300…/900
font-family ：设置字体，比如微软雅黑、黑体、楷体等
color ：设置字体颜色

背景属性
background-color ：设置背景颜色
background-image ：设置背景图片，url(‘图片的路径’);
background-repeat ：设置或检索对象的背景图片是否及如何排列，常用取值：

repeat(默认值,重复排列)
repeat-x(横向重复排列,但纵向不重复)
repaet-y(纵向重复排列,但横向不重复)
no-repeat(不重复)

**background-position ：**设置或检索对象的背景图片位置
background : 背景颜色背景图片背景图片是否重复背景图片的位置

边框（border）
border:2px solid red; – 设置元素的边框(可以同时设置边框的宽度、样式、颜色) border属性可以拆分为如下设置:

border-width: 2px; -- 设置元素边框的宽度
border-style: solid; -- 设置元素边框的样式
border-color: red; -- 设置元素边框的颜色

其中border-width、border-style、border-color也可以按照上右下左方向进行拆分，以border-width为例：

border-top-width: 2px; -- 设置上边框的宽度
border-left-width: 2px; -- 设置左边框的宽度
border-right-width: 2px; -- 设置右边框的宽度
border-bottom-width: 2px; -- 设置下边框的宽度

其他属性
width：设置元素的宽度
height：设置元素的高
margin: 设置元素的外边距

margin-top: 10px; -- 设置元素的上外边距为10px;
margin-right: 20px; -- 设置元素的右外边距为20px;
margin-bottom: 30px; -- 设置元素的下外边距为30px;
margin-left: 40px; -- 设置元素的左外边距是40px;

margin: 10px 20px 30px 40px; -- 上 右 下 左, 顺时针方向对应
margin: 10px 20px 30px; -- 上 左右 下
margin: 10px 20px; -- 上下 左右
margin: 10px; -- 上下左右都是10px;

display属性
display用来设置元素的类型，常用取值：

block：块级元素的默认值
    默认情况下独占一行
    可以设置宽高
inline：行内元素的默认值
    默认情况下多个行内元素可以处在同一行
    一般不能设置宽高
inline-block：行内块元素
    多个元素既可以显示在同一行, 也可以设置宽和高
none：表示隐藏元素

元素类型

div/span/p 都是一个容器标签，用于包裹其他内容（这些元素本身不具备太多的样式！）
p: 块级元素，默认独占一行，用于包裹一段文本（写文章时用于p标签包裹每一段内容）
div: 块级元素，默认独占一行，用于包裹其他内容，将样式设置在div上，就可以作用在div的内容上。
**span：**行内元素，默认可以和其他元素显示在同一行。

块级元素（block）
默认情况下，块级元素独占一行
可以设置宽和高，如果设置了就是设置的宽和高
如果不设置宽和高，其中宽是默认填满父元素，而高是由内容决定(由内容支撑)
比如: div/p/h1~h6/form/table 等元素都是块级元素

行内元素（inline）
默认情况下，多个行内元素可以处在同一行
不能设置宽和高
比如: span/input/img/i/b 等元素都是行内元素

行内块元素（inline-block）
既具备行内元素的特征(可以同行显示)，还具备块级元素的特征(可以设置宽和高)