html标签补充 <input type="radio" name="fruit" value="apple">单选 radio <input type="checkbox" name="fruit" value="apple">多选 checkbox 单选块 是圆形 多选块是方形
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>123</title> </head> <body> <form method="get" action=""> <h1> Choose your sex </h1> male:<input type="radio" name="sex" value="male" checked="checked"><!--checked=”checked“使选项默认在一开始选择此选项--> female:<input type="radio" name="sex" value="female"> <br> <input type="submit"> </form> </body> </html>select+option组成下拉菜单
<select> <option> </option> </select> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>123</title> </head> <body> <form method="get" action=""> <h1> Province </h1> <select name="Province"><!--数据名直接在select中写一个就行--> <option>河北</option><!--数据值（value）就是是<option>内的内容--> <option>北京</option><!--如果给option强加value 按value来定义数据值--> <option>天津</option> </select> <br> <input type="submit"> </form> </body> </html>CSS引入 CSS = cascading style sheet 层叠样式表 1.行间样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>123</title> </head> <body> <div style=" width: 100px; height: 100px; background-color: red;"> </div> </body> </html>2.页面级CSS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>123</title> <style type="text/css"> <!--告诉系统要用CSS--> div{ width: 100px; height: 100px; background-color: green; } </style> </head> <body> <div></div> </body> </html>3.外部引入CSS HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>123</title> <link rel="stylesheet" type="text/css" href="new 1.css"> <!--herf中写CSS的地址--> </head> <body> <div></div> </body> </html>CSS:
div{ width: 100px; height: 100px; border-radius: 50%; /* 圆角*/ background-color: black; }CSS基础选择器选择器权重 1.选择器 ①id选择器 根据在HTML里命名的id，在CSS里输入#名字，就可以对他定义 每个id 只能一一对应
HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>123</title> <link rel="stylesheet" type="text/css" href="new 1.css"> </head> <body> <div id="only">123</div> <div id="only1">234</div> </body> </html>CSS:
#only{ background-color: red; } #only1{ background-color: green; }②class选择器 一个class值可以对应多个元素,一个元素也可以对应多个class HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>123</title> <link rel="stylesheet" type="text/css" href="new 1.css"> </head> <body> <div class="demo demo1">123</div> <!--用两个class，直接空格加另一个--> <div class="demo">234</div> </body> </html>CSS:
③标签选择器 直接在CSS开头输入标签，所有的标签都会改变 不管套了多少层 都会改变
div{ width: 100px; height: 100px; border-radius: 50%; /* 圆角*/ background-color: black; }④通配符选择器
*{ /*所有标识符都会改变*/ width: 100px; height: 100px; border-radius: 50%; /* 圆角*/ background-color: black; }id优先级比class高 class比标签选择器高 通配符最低
⑤属性选择器 HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>123</title> <link rel="stylesheet" type="text/css" href="new 1.css"> </head> <body> <div id="only" class="demo">123</div> <div id="only1" class="demo">234</div> </body> </html>CSS:
[id]{ /*[]nn内写class，id 单独特只一个id时可以用 id="名字"*/ background-color: red; }在属性后写!important 优先级直接变最高
[id]{ background-color: red !important; }1.id优先级比class高 2.class比标签选择器高 3.class选择器与属性选择器并值，谁在前优先 4.通配符最低
CSS权重： 256进制 !important Infinity +∞ 行间样式 1000 id 100 class|属性|伪类 10 标签|伪元素 1 通配符 0
