<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1"> # border 即表示表格 <thead> <tr> # 一行数据 -- 表头 <td> # 列数据 -- 表头内容 </td> </tr> # <th></th> 表头加粗 </thead> <tbody> <tr> <td colspan="2"> # colspan="2" 表示占两列、rowspan="2" 表示占两行 </td> </tr> </tbody> </table> </body> </html>
<ul type="disc"> <li>第一项</li> # li 为块级元素,用来作为导航 <li>第二项</li> ... </ul> # ul 为块级元素
type属性:
<dl> <dt>标题1</dt> <dd>内容1</dd> <dt>标题2</dt> <dd>内容1</dd> <dd>内容2</dd> </dl>
元素会根据不同的 type 属性,变化为多种形态。
type属性值 | 表现形式 | 对应代码 |
---|---|---|
text | 单行输入文本 | <input type=text" /> |
password | 密码输入框 | |
date | 日期输入框 | |
checkbox | 复选框 | |
radio | 单选框 | |
submit | 提交按钮 | |
reset | 重置按钮 | |
button | 普通按钮 | |
hidden | 隐藏输入框 |
- input 框是行内元素,因此不添加换行符即在同一行内 - 每个 input 里都应该有一个 name 属性 - name 属性相当于 Python 中的字典 - form 表单默认为 get 提交,需要使用 method 将其修改为 post
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>如梦西沉</title> </head> <body> <!--action: 1.什么都不写,即向当前位置提交 2.写全路径 3./index/ 自动拼接 ip:port/index/ form表单中要想上传文件,必须修改enctype属性 是一种编码方式 urlencoded, form-data, json enctype: 1.application/x-www-form-urlencoded (默认) 2.multipart/form-data form表单只能提交urlencoded, form-data, json格式的数据不能提交, 1. ajax 2. 第三方工具 postman --> <form action="/index/" method="post" enctype="multipart/form-data"> <p> <!-- 文本框,value 表示默认值,disabled 表示禁用,readonly 表示只读--> username: <input type="text" value="Jason" disabled name="username" placeholder="账号"> </p> <p> <!-- 密码框--> password: <input type="password" value="" name="password" placeholder="密码"> </p> <p> <!-- 日期输入框--> 日期: <input type="date"> </p> <p> <!-- 复选框, checked 表示默认--> <input type="checkbox" name="hobby" value="0" checked>篮球 <input type="checkbox" name="hobby" value="1">足球 <input type="checkbox" name="hobby" value="2" checked>排球 </p> <p> <!-- 单选框, checked 表示默认--> <input type="radio" name="gender" value="0" checked>Male <input type="radio" name="gender" value="1">Female <input type="radio" name="gender" value="2">Other </p> <!-- 下拉框, selected 表示默认--> <select name="province" id="city"> <option value="0">北京</option> <option value="1">南京</option> <option value="2">上海</option> <option value="3">广州</option> <option selected="selected" value="4" >杭州</option> </select> <p> <!-- 选择文件按钮--> 选择文件: <input type="file" name="myfile"> </p> <p> <!-- 提交按钮--> <input type="submit"> <!-- 重置按钮--> <input type="reset"> </p> <p> <!-- 大段文本框--> <textarea name="" id="" cols="30" rows="10"> </textarea> </p> <p> <!-- 用于查找数据--> <input type="hidden" value="1"> </p> <p> <!-- 空白按钮,想要提交必须写在 form 中--> <input type="button"> </p> </form> </body> </html>
CSS 语法结构 选择器{ 属性名 1; 属性值 1; 属性名 2; 属性值 2; 属性名 3; 属性值 3; 属性名 4; 属性值 4; 属性名 5; 属性值 5; 属性名 6; 属性值 6; } <!-- id属性和class属性都是所有标签内置的 id:它唯一不能重复, 一个网页中只能由一个id class: 可以有多个值,类似于面向对象的继承 自定义属性 --> <div id="d1" class="c1 c2 c3" username="egon">div1</div> <div id="d2" class="c1 c2">div2</div> </body> </html>
1.ID 选择器 # 修改该 id 值所对应的属性 2.Class选择器 # 修改带有相同类的属性 3.标签选择器 # 修改相同标签的属性 4.通用选择器 # 选择所有标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*id选择器语法*/ #d1 { color: red; } /*类选择器语法*/ .c1 { color: red; } /*标签选择器语法*/ div { color: red; } /*一般用来做初始化的*/ * { color: purple; } </style> </head> <body> <div id="d1" class="c1 c2">div1</div> <div id="d2" class="c3 c1">div2</div> <div id="d3" class="c4">div3</div> <span>sapn1</span> <p>ppppp</p> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*属性选择器语法*/ /*只要带username属性的所有标签,都会被选中*/ [username] { color: red; } [username='div2'] { color: red; } div[username='div2'] { color: red; } </style> </head> <body> <!--属性选择器--> <div username="div1">div1</div> <div username="div2">div2</div> <p username="div2">pppppp</p> </body> </html>
在后代选择器中,规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符(combinator)。每个空格结合符可以解释为“... 在 ... 找到”、“... 作为 ... 的一部分”、“... 作为 ... 的后代”,但是要求必须从右向左读选择器。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*逗号表示并列关系, 下列标签全被选中*/ div, p, span { color: green; } /*后代选择器*/ div p span { color: green; } #d1 .c1 span { color: red; } </style> </head> <body> <!-- <div>div</div>--> <!-- <p>p</p>--> <!-- <span>span</span>--> <div id="d1">div <p id="p1" class="c1">p <span>span</span> </p> <p> <a href=""></a> </p> </div> <p>p11</p> <span>span111</span> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*默认就是link*/ a:link { color: red; } /*当鼠标悬浮时,触发的颜色, 掌握*/ a:hover { color: green; } /*当鼠标点击左键不放时,触发的颜色*/ a:active { color: blue; } /*访问连接之后的颜色*/ a:visited { color: purple; } /*鼠标悬浮时,触发输入框颜色*/ input:focus { background-color: red; } </style> </head> <body> <a href="http://www.baidu.com">点我点我</a> <!--input获取焦点,失去焦点--> <input type="text"> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*p:first-letter {*/ /* color: red;*/ /* font-size: 30px;*/ /*}*/ p:before { content: "我很帅"; font-size: 30px; color: red; } p:after { content: "洋哥很帅"; font-size: 30px; color: red; } /* 它可以解决父标签塌陷问题*/ </style> </head> <body> <p>当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染)。</p> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- <style>--> <!-- div {--> <!-- color: red;--> <!-- font-size: 20px;--> <!-- }--> <!-- </style>--> <!-- <link rel="stylesheet" href="mycss.css">--> <style> #d1 { color: red; } .c1 { color: blue; } div { color: purple; } </style> </head> <body> <!-- 选择器优先级有两种: 1. 选择器相同的情况下 行内式 > style 外联 style 和 外联,谁后执行就听谁的 2. 选择器不同的情况下 行内式 > id > class > 标签 --> <!--<div style="color: red;font-size: 30px">div</div>--> <!--<div>div</div>--> <div id="d1" class="c1" style="color: green">div</div> </body> </html>
行内式,就是将css样式代码写在具体网页中的一个html标签元素内;行内式要在特定的HTML标记内使用,使用style属性来设置特定HTML标记的样式。比如:<div style="color:#f00"></div> 特点: 1、行内式放在代码中的HTML元素中 2、使用行内样式时,样式只会影响你选择的元素 3、行内样式没有选择器 注:HTML中定义的行内样式只适用于它们添加到的标记。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*块级元素可以设置长宽*/ div { width: 200px; height: 200px; background-color: red; } /*行内元素不能设置长宽*/ span { width: 100px; height: 100px; background-color: green; } </style> </head> <body> <div>div</div> <span>span</span> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p { font-size: 14px; /*加粗*/ font-weight: bolder; /*数字越大加粗程度越大, 100-900*/ font-weight: 100; color: red; /*rgb 0-255 255 * 255 * 255*/ color: rgb(101, 250, 100); /*rgba => a:透明度,范围0-1,数字越小,越趋向于透明*/ color: rgba(101,250,100, 0.9); /*它有1600w种颜色*/ color: #424242; color: #6f7071; } </style> </head> <body> <p>我是大帅哥</p> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p { /*让文本居中*/ text-align: center; /*让文本居右*/ text-align: right; /*默认文本居左*/ text-align: left; /*下划线*/ text-decoration: underline; /*中划线*/ text-decoration: line-through; /*上划线*/ text-decoration: overline; /*常用于去除超链接的下划线*/ text-decoration: none; } a { /*掌握*/ text-decoration: none; } </style> </head> <body> <a href="">点我</a> <!-- <p>当浏览器读到一个样式表,</p>--> </body> </html>