HTML常用字段汇总
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>标题</title> <!-- 浏览器标题 --> <meta name="author" content="魏红斌"> <!-- 页面声明（不展示） --> </head> <body> <h1>字体样式</h1> <!-- 字体样式 --> <h2 style="background-color:red">背景颜色<h2> <!-- 背景颜色 --> <h3 style="text-align:center">文本对齐</h3> <!-- 文本对齐 --> <p style="font-family:arial;color:green;font-size:20px;">字体字样</p> <!-- 字体样式 --> <div> <form action="#" onsubmit="alert(' 姓名:'+ name.value +'\n 电话:'+ tel.value +'\n 年龄:'+ age.value +'\n 性别:'+sex.value)"> <!-- 表单，同时输出页面 --> name:<br> <input type="text" name="name"> <!-- 表字段 --> <br> tel:<br> <input type="text" name="tel"> <br> age:<br> <input type="text" name="age"> <br> sex:<br> <input type="radio" name="sex" value="man">man <!-- 表选钮 --> <input type="radio" name="sex" value="woman">woman <input type="radio" name="sex" value="oldwoman">oldwoman <br> <br> <input type="submit" name="提交"> <!-- 表按钮 --> <input type="reset" name="重置"> <!-- 表按钮 --> <br> </div> <div> <!-- 区域块 --> <img src="test.jpg" alt="图像标签"> <!-- url记录图片位置 --> </div> <div> <table border="1"> <!-- html表格边框 --> <tr> <!-- html表格 --> <th>表头1</th> <th>表头2</th> </tr> <tr> <td>行1，列1</td> <td>行1，列2</td> </tr> <tr> <td>行2，列1</td> <td>行2，列2</td> </tr> </table> </div> <a href="https://www.baidu.com">超链接文本</a> <!-- 超链接 --> <p>段落文本</p> <!-- 段落 --> </body> </html>
CSS 常用字段汇总
语法
选择器 {声明；声明；}
标签选择器
html {color:green} <!-- 以标签本身做选择器 --> h1 {color,red} p {font-size:30px; color:red;}
类选择器
.test1 {font-size:30px; color:red;} <!-- 提前定义class属性声明做选择器 --> .test2 {font-size:30px; color:red;} .test3 {font-size:30px; color:red;}
ID选择器
.p {font-size:30px; color:red;} #test1 {font-size:30px; color:red;} <!-- 用html元素的id属性做选择器 --> #test2 {font-size:30px; color:red;} #test3 {font-size:30px; color:red;}
