html基础2

最新推荐文章于 2023-03-12 16:18:00 发布

营养快线121号

最新推荐文章于 2023-03-12 16:18:00 发布

阅读量348

点赞数

分类专栏：前端知识文章标签： html基础

本文链接：https://blog.csdn.net/TDFSFSF/article/details/102233051

版权

前端知识专栏收录该内容

7 篇文章 0 订阅

订阅专栏

10、input标签
input是输入的意思，属性type的取值有很多中，例如文本框：text、密码框password、单选框radio、多选框checkbox、普通按钮button、提交按钮submit、重置按钮reset、文件域file、图像形式的提交按钮image

 <input type="" name="input的名称" value="默认文本值" size="页面中显示的宽度" checked="checked" maxlength="允许输入最多的字符数"/>

label标签：用于绑定一个表单元素，当点击label标签的时候，被绑定的元素就会获得输入焦点

 <label for="male">male</label>
    <input type="radio" name="sex" id="male" value="male"/>

textarea控件
在输入大量信息时，就需要用到<textarea></textarea>标签
<textarea clos="每行中的字符数" rows="显示的行数">
    文本内容
</textarea>

下拉列表

 <select name="" id="">
        <option selected="selected" value="">option是选项</option>
    </select>

11、表单域
html中，form标签被用于定义表单域，就是创建一个表单，来实现用户信息的手机和传递，form中的所有内容都回被提交给服务器，创建表单的基本语法是：

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

提交方式分为get和post

get和post的区别：
1）Get 是用来从服务器上获得数据，而Post 是用来向服务器上传递数据
2）Get 将表单中数据按照variable=value的形式，添加到action 所指向的URL 后面，并且两者使用“?”连接，而各个变量之间使用“&”连接；Post 是将表单中的数据放在form
的数据体中，按照变量和值相对应的方式，传递到action所指向URL
3）Get 是不安全的，因为在传输过程，数据被放在请求的URL 中；Post 的所有操作对用户来说都是不可见的
4）Get 传输的数据量小，这主要是因为受URL 长度限制；而Post 可以传输大量的数据，所以在上传文件只能使用Post
5）Get 限制Form 表单的数据集必须为ASCII 字符，而Post 支持整个ISO10646字符集
6）Get 是Form 的默认方法

12、css
css美化样式，被称为层叠样式表，主要用来设置html亚眠的文本内容，图片外形以及版面的布局

内部样式表
将css代码集中写在html文档head头部标签中，并用style标签定义

	<head>
            <style>
                属性:属性值;
            </style>
    </head>

外部样式表
连入式将所有样式放在一个或者多个以css为扩展名的外部样式表中，通过link标签来链接到html文件中

<head><link href="css文件的路径" type="test/css" rel="stylesheet"></head>

行内样式表
写在标签中的样式

<div width="100" height="100"></div>

13、css选择器

 标签选择器：用html的标签名称作为选择器，按标签名称分类
        标签名{
            属性1：属性1；
            属性2：属性值2；
            ...
        }或者
        元素名{
            属性1：属性1；
            属性2：属性值2；
            ...
        }
id选择器
    用#标识，后面紧跟id名称（一个id的名称只可以出现一次）
    #id名{
        属性1：属性值1;
        属性2：属性值2；
        ...
    }
    标签中加入id="id名"
通配符选择器
    用*表示，是所有的选择器中作用最广泛的，可以匹配所有的元素
    *{
        属性1：属性值1；
        属性2：属性值2；
        ...
    }
类选择器（一个class的类名可以出现很多次）
    使用.进行表示，后面紧跟类名
    .类名{
        属性1：属性值1；
        属性2：属性值2；
        ...
    }
    标签中加入class="类名"
复合选择器
    后代选择器，中间用空格隔开
    子代选择器，用>大于号隔开
    并集选择器，用，逗号隔开
    交集选择器，用.链接，不需要加空格
    链接伪类选择器：
        ：hover鼠标移动到链接上
        ：link未访问的链接
        ：visited已访问的链接
        ：active选定的链接

14、css样式属性
css字体样式属性
font-size属性用于设置字号，单位有

em 相当于当前对象文本的字体尺寸
px 像素
绝对长度单位说明
in 英寸
cm 厘米
mm 毫米
pt 点

font-family:字体用于设置字体（宋体、微软雅黑、黑体、幼圆等）
font-weight属性用来设置字体粗细

normal 正常字体400
bold 粗体700
bolder 特粗
lighter 细体
number

font-style：字体风格

normal：默认值
italic：斜体
oblique：倾斜

font：font-style font-weight font-size/line-height font-family；不可以更改顺序

css的外观属性
    color：颜色用来设置字体的颜色
        可以是16进制的，也可以是预定义的颜色值，rgb代码
    line-height：行间距
        设置行间距，就是行与行之间的距离，就是字符的垂直间距，可以是px、em和百分比
    text-align：水平对齐方式
        设置文本内容水平对齐，可以有left、center和right
    text-indent：首行缩进
        设置首行文本的缩进，1em就是一个字的宽度
    text-decoration文本的修饰
        给链接修改装饰效果
        none默认
        underline文本下的一条线 下划线
        overline文本上的一条线
        line-through穿过文本的一条线

15、标签显示模式
块级元素：占据一整行回多整行，可以设hi宽度和高度
h1~h6、div、p、ul、ol、li等
行级元素：所有的元素都在一行上、不可以设置宽高
行内块元素：和相邻的行内元素在一行上，但是会有空白间隙、默认宽度就是内容本身的宽度，高度和行高、外边距都是可以控制的

标签显示模式转换：display
    inline把块级元素转换为行内元素
    block把行内元素转换为块级元素
    inline-block把行内元素转换为行内块元素

课堂练习：导航栏案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>导航栏案例</title>
    <style type="text/css">
        *{
            text-align: center;
        }
        div span{
            height:50px;
            width:100px;
            display:inline-block;
            background:orange;
            text-align: center;
            line-height: 50px;
            border-radius: 20px;
        }
        a{
            text-decoration: none;
            color:black;
        }
        span:hover{
            background:skyblue;
        }
    </style>
</head>
<body>
    <div>
        <span><a href="#">网站首页</a></span>
        <span><a href="#">网站首页</a></span>
        <span><a href="#">网站首页</a></span>
        <span><a href="#">网站首页</a></span>
        <span><a href="#">网站首页</a></span>
        <span><a href="#">网站首页</a></span>
    </div>
</body>
</html>

1、元素有哪几种显示方式 A
A block inline inline-block
B block none inline-block
C none inline inline-block
D block inline none
2、关于显示方式说法不正确的是 B
A 块元素独占一行
B 行内元素一行可以放多个
C 块级可以容纳行内元素
D 块级元素的代表有div h p img等
3、关于显示方式说法正确的是 C
A 只有行内元素一行可以放多个
B 所有的元素宽高都由内容决定
C 行内元素只能容纳文本或其他行内元素
D 行内元素的代表有span a img等
4、给div设置什么属性可以让一个div的显示方式与span标签一样 B
A display:block
B display:inline
C display:inline-block
D display:none
5、下面哪个标签默认情况下不能在同一行显示 C
A a
B span
C p
D img
6、选择器#box>p，下列说法中正确的是 A
A 选择的是id为box的元素中所有的子元素p
B 选择的是id为box的元素中所有的后代元素p
C 选择的是id为box的元素的直接子元素p
D 选择的是id为box的元素和p元素
7、选择器#box p，下列说法中正确的是 B
A 选择的是id为box的元素所有的直接子元素p
B 选择的是id为box的元素中所有的后代元素p
C 选择的是id为box的元素直接子元素p
D 选择的是id为box的元素的第一个后代元素p
8、选择器p, .box，下列说法中正确的是 B
A 选择的是p元素后代里所有类名为box的元素
B 选择的是p元素和所有类名为box的元素
C 选择的是p元素后代里第一个类名为box的子元素
D 选择的是拥有box类名的p元素
9、选择器p.box，下列说法中正确的是 D
A 选择的是p元素后代里所有类名为box的元素
B 选择的是p元素和所有类名为box的元素
C 选择的是p元素后代里第一个类名为box的子元素
D 选择的是拥有box类名的p元素

16、css三大特性
层叠继承优先级

css层叠性是指css样式的叠加
css继承性是指子标签会继承夫标签的某些样式
css的优先级是根据权重值决定的
行内样式是最先的
id是100，class是10，标签是1
权重值相同时，采取就近原则

17、css背景 background:背景颜色背景图片地址背景平铺背景滚动背景位置

背景色background-color:颜色
背景图片background-image:url(“图片路径”)
背景图片平铺background-repeat:repeat | no-repeat|repeat-x|repeat-y
定位background-position:center top
背景透明background-rgba(0,0,0,0.3)