html、CSS 简单回顾

html回顾

常用的html标签
<html></html>
<head></head> ：head内的标签不是给用户看的，是用来定义一些配置，给浏览器看的
<body></body> ：body内的标签就是浏览器展示给用户看的

head内常用的标签：
    <title></title>: 用来显示网页标题
    <style></style>: 定义内部样式，内部也支持写css代码
    <script></script>: 用来写js代码，也支持导入外界的js文件
    <link></link>: 用来引入外部的css文件
    </meta>: 定义网页原信息
meta标签介绍：
    name属性：主要用于描述网页，与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的
<meta name='keywords' content='meta总结，html meta,mata属性，meta跳转'>
# keywords关键字，在搜索引擎中输入这些就会显示网页
<meta name='description' content='老男孩教育python学院'> # 描述信息

body常用标签
基本标签（块级标签和行内标签）
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>

<p>段落标签</p>

<h1>h1~h6标题标签</h1>

<br> 换行
<hr> 添加水平线

// 无序列表，type属性有：disc(实心圆点，默认值)、circle(空心圆圈)、square(实心方块)、none(无样式)
<ui>
    <li>第一项</li>
    <li>第二项</li>
</ui>

// 表格标签
<table>
    <thead>  # 表头
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>  #表体
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>

//form表单标签
表单属性：
    1.action:控制数据提交目的地
        1.不写的情况下，默认提交到当前的页面所在的路径
        2.写全路径（http://www.baidu.com)
        3.路径后缀（/index/)
    2.form表单默认是get请求，通过method参数可修改为post请求
    3.form表单中要想触发提交动作，可通过以下两种情况：
        1.input标签type指定成submit
        2.直接写button标签
    4.获取用户输入（输入，选择，上传。。。）的标签，都必须有一个name属性，这个name属性      就类似于字典的key,而标签获取到的用户写入的值就类似于字典的value。

    <input type="text" id="d1" name="username" value="默认值">
    name就相当于是字典的key
    value就是字典的值
    获取都的用户输入都会被放入value属性中

5.form表单传文件的时候，需要指定enctype参数

input标签

input元素会根据不同的type属性，变化成多种形态

type属性值	表现形式	对应代码
text	单行输入文本
password	密码输入框
date	日期输入框
checkbox	复选框
radio	单选框
submit	提交按钮
reset	重置按钮
button	普通按钮
hidden	隐藏输入框
file	文本选择框

text:普通文本
password:密文不展示明文
date:日期
submit:触发提交动作
button:普通按钮没有实际意义但是可以通过js绑定事件实现自定义动作
reset:重置表单内容
radio:单选可以通过checked控制默认选择(当属性值和属性名相同的情况下可以简写 checked) checked="checked"
checkbox:多选同上可以设置默认值
file:获取用户上传的文件

select标签
默认是单选可以通过multiple变成多选
如果想默认选择用selected (selected="selected")

textarea标签
获取用户输入的大段文本

css复习

选择器

1、基本选择器

扫描二维码关注公众号，回复： 7982451 查看本文章

元素选择器 (标签名+样式) p是标签名

p  {color:red;}

ID选择器标签的id值+样式

#i1 {
  background-color: red;
}

类选择器点+标签class值+样式

.c1 {
 color:red;
}

注意：样式类型不要用数字开头。标签中的class属性如果有多个，要用空格分隔。

通用选择器针对于所有都会修改成这个样式

*{
color:white;
}

2、组合选择器

后代选择器

/*li内部的a标签设置字体颜色*/
li a {
  color: green;
}

儿子选择器

/*选择所有父级是 <div> 元素的 <p> 元素*/
div>p {
  color:white;
}

毗邻选择器

/*选择所有紧接着<div>元素之后的<p>元素*/
div+p {
  margin: 5px;
}

弟弟选择器

/*i1后面所有的兄弟p标签*/
#i1~p {
  border: 2px solid royalblue;
}

3、属性选择器（下面这个title是随意取的一个名字）

/*用于选取带有指定属性的元素。*/
p[title] {
  color: red;
}
/*用于选取带有指定属性和值的元素。*/
p[title="213"] {
  color: green;
}

4、伪类选择器 (标签名：状态名)

用a标签的各种状态举例

/* 未访问的链接 */
a:link {
  color: #FF0000
}

/* 鼠标移动到链接上 */
a:hover {
  color: #FF00FF
} 

/* 选定的链接 */ 
a:active {
  color: #0000FF
}

/* 已访问的链接 */
a:visited {
  color: #00FF00
} 

/*input输入框获取焦点时样式*/
input:focus {
  outline: none;
  background-color: #eee;
}

6、伪元素选择器

first-letter 常用的给首字母设置特殊样式

p:first-letter {
  font-size: 48px;
  color: red;
}

before

/*在每个<p>元素之前插入内容*/
p:before {
  content:"*";   #插入内容
  color:red;
}

after

/*在每个<p>元素之后插入内容*/
p:after {
  content:"[?]";
  color:blue;
}

before和after多用于清除浮动

7、选择器的优先级

行内样式>id选择器>类选择器>元素选择器

html、CSS 简单回顾

猜你喜欢