目录

• HTML基础（二）form表单、CSS
  • form表单
    • input用法
    • select标签
    • textarea多行文本
  • CSS
    • CSS的三种引入方式
    • 基本选择器
    • 组合选择器
    • 属性选择器
    • 分组和嵌套
    • 伪类选择器
    • 伪元素选择器
    • 选择器的优先级

HTML基础（二）form表单、CSS

form表单

表单用于向服务器传输数据，从而实现用户与Web服务器的交互

表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等

表单还可以包含textarea、select、fieldset和label标签

参数： action：控制数据提交的地址 三种书写方式 1. 不写 默认朝当前页面所在的地址提交数据 2. 写全路径 3.只写路径后缀 method：控制数据提交的方式 get form表单默认是get请求 pos

input用法

input需要和label一起使用

<form action=""> <label for=""> <input type="text" name="" id=""> </label></form>--------------------------------------------------------<label for="d1">用户名:</label><input type="text" id="d1">

#form表单如果要提交文件数据 必须修改以下参数#enctype="multipart/form-data"<form action="" method="post" enctype="multipart/form-data"> <p> <label for="d1"> 用户名：<input type="text" name="d1" > </label> </p> <p> 密码：<input type="password" > </p> <p> 生日：<input type="date" > </p> <p> 毕业院校：<input type="text" > </p> <p> 男<input type="radio" name="gender" value="male"> 女<input type="radio" name="gender" value="female"> </p> <p> python<input type="checkbox" name="course" value="python"> linux<input type="checkbox" name="course" value="linux"> go<input type="checkbox" name="course" value="go"> </p> <p> <input type="hidden" name="" > </p> <p>自我介绍: <textarea name="info" id="" cols="100" rows="10"></textarea> </p> <p>证书: <input type="file" name="myfile"> </p> <p> <input type="button" value="按钮"> <input type="reset" value="重置"> <input type="submit" value="提交"> </p></form>

#disable属性:禁用该input框<p><label for="d1"> 用户名:<input type="text" id="d1" name="username" disable></label></p>#value属性 设置默认值<p><label for="d1"> 用户名:<input type="text" id="d1" value="momo" name="username" disable></label></p> #默认选中 radio checkbox checked='checked' 当属性名和属性值相同的时候 可以只写属性名(******)

select标签

<p>course: <select name="" id="" multiple> <option value="">python</option> <option value="">linux</option> <option value="">go</option> </select></p>

textarea多行文本

<p>个人简历: <input type="file" name="myfile"></p>

form表单提交数据的动作

1. input标签中加入 type=sumbit
2. 使用button标签

<input type="submit" value="提交"><button> button </button>

CSS

层叠样式表:用于控制html标签样式

语法结构:

? 选择器 {属性1:属性值1}

<style> p{ background-color: #2b99ff; }</style>

CSS的三种引入方式

1.通过link标签引入外部css文件 <link rel="stylesheet" href="02%20示例css样式.css">2.直接在html页面上的head内,通过style标签直接书写css代码 <style> p{ background-color: #2b99ff; } </style>3.行内式(直接在标签内部通过style属性直接书写) <h1 style="color: orange">我是标签内部</h1>

基本选择器

元素选择器

p {color: "red";}

ID选择器

#id选择器 #+id值#d1 { background-color: red;}

类选择器

#类选择器 .+类值.c1 { font-size: 14px;}

通用选择器

#通用选择器 ** { color: white;}

组合选择器

后代选择器

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

儿子选择器

#选择所有父级是 <div> 元素的 <p> 元素div>p { font-family: "Arial Black", arial-black, cursive;}

毗邻选择器

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

弟弟选择器

#弟弟选择器 同级别下面所有的div~span { color: orange;}

属性选择器

#1.含有某个属性名的标签#2.含有某个属性名并且属性值是...的标签#3.找p标签并且含有某个属性名并且属性值是...的标签[password] { color: red;} [username] { color: black;} 

分组和嵌套

分组

#d1 { color: red;}.c1 { color: red;}p { color: red;}--------------------------------------------------------#d1,.c1,p { color: orange;}

嵌套

# 空一格代表内部所有的.c1 p { color: red;}

伪类选择器

#未访问的链接a:link { color: red;}#鼠标移动到链接上a:hover { /*hover表示的就是悬浮的意思*/ color: black;}# 选定的链接a:active { color: orange;}#已访问的链接a:visited { color: pink;}#input输入框获取焦点时样式input:focus { background-color: orange;}span:hover { background-color: pink;}

伪元素选择器

first-letter

#给首字母设置特殊样式p:first-letter { font-size: 48px; color: red;}

before

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

after

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

选择器的优先级