HTML常用标签及CSS样式选择器
html部分
<代码类=" language-html "> & lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt; !——头标记写描述性的信息(css、javaScript)——比;
& lt; !——引入外部的样式文件
rel:关系的英文缩写·rel属性用于定义链接的文件和HTML文档之间的关系
——比;
& lt;链接rel="样式表" type=" text/css " href=" https://www.yisu.com/zixun/css/mycss.css "/比;
& lt; !——内部样式:样式是用来描述页面的,属于描述性的信息,应写在头中风格的标签内——比;
& lt; style>
h2 {
颜色:红色;
}
& lt;/style>
& lt;元charset=" utf - 8 "/比;
& lt; title> & lt;/title>
& lt;/head>
& lt; body>
& lt; !——体标记写页面显示的信息——比;
& lt; !——一个超链接或锚(锚),href(超文本参考):可以指定应用内或者是应用外的任意地址——比;
& lt; a href=" http://www.baidu.com "在我是超链接,链接地址是百度& lt;/a>
& lt; !——表单作用:收集用户的信息,提交到后台服务器——比;
& lt;形式行动=" http://www.baidu.com "=" get/post方法比;
& lt; !——提交到服务器的数据格式:名称值=值值(如用户名=admin),服务器通过名字值获得值值——比;
& lt; !——文本输入框——比;
用户名称:& lt;输入type=" text " name="用户名" value=" https://www.yisu.com/zixun/admin "/比;
& lt; !——br换行——比;
& lt; br/比;
& lt; !——密码——比;
用户密码:& lt;输入type="密码" name="密码"/比;
& lt; br/比;
& lt; !——单选框——比;
& lt; !——只用名字当属性值相同的时候,才有单选的效果——比;
用户性别:男:& lt;输入类型=肮悴ァ泵?"性别" value=" https://www.yisu.com/zixun/"男/比;
女:& lt;输入类型=肮悴ァ眓ame="性别" value=" https://www.yisu.com/zixun/"女/比;
& lt; br/比;
& lt; !——多选框——比;
& lt; !——名字值要相同——比;
用户爱好:吃饭& lt;输入类型=案囱】颉泵?"爱好" value=" https://www.yisu.com/zixun/eat "/比;
睡觉& lt;输入类型=案囱】颉眓ame="爱好" value=" https://www.yisu.com/zixun/sleep "/比;
打豆豆& lt;输入类型=案囱】颉眓ame="爱好" value=" https://www.yisu.com/zixun/Beat豆”/比;
& lt; br/比;
& lt; !——下拉列表——比;
用户地址:省份& lt;选择name=笆 北?
& lt;选项值=" https://www.yisu.com/zixun/山东省”的在山东省& lt;/option>
& lt;选项值=" https://www.yisu.com/zixun/江苏省”在江苏省& lt;/option>
& lt;选项值=" https://www.yisu.com/zixun/北京市”在北京市& lt;/option>
& lt;/select>
& lt; br/比;
& lt; !——提交按钮——比;
& lt;输入类型="提交" value=" https://www.yisu.com/zixun/提交”/比;
& lt;/form>
& lt; !——h2 ~ h7:标题标签(头)——比;
& lt; h2对齐=爸行摹北?员工信息列表& lt;/h2>
& lt; !——表格——比;
& lt; !——单元格边距:单元格子的内容与单元格子四边边界之间空白距离
单元格间距:表表格中的单元格子之间的空白距离
tr:表格行
道明:表格数据单元列
th:表格标题列,自带居中并加粗的效果
——比;
& lt;表一致="中心"边境=? px”单元格间距=" 0 "单元格边距宽度=?0 px”=?0%”比;
& lt; tr>
& lt; th>员工ID
& lt; th>员工名字& lt;/th>
& lt; th>员工性别& lt;/th>
& lt; th>员工描述& lt;/th>
& lt;/tr>
& lt; tr>
& lt; td> 1 & lt;/td>
& lt; td>张三& lt;/td>
& lt; td>男& lt;/td>
& lt; td>好man
& lt;/tr>
& lt; tr>
& lt; td> 2 & lt;/td>
& lt; td>小红& lt;/td>
& lt; td>女& lt;/td>
& lt; td>好woman
& lt;/tr>
& lt;/table>
& lt; !——div:网页布局标签(分)
作用:选中某一区域,添加样式
——比;
& lt; div比;
这是div
& lt;/div>
& lt; div id=癲1”比;
这是div1
& lt;/div>
& lt; div类=癲2”比;
这是div2
& lt;/div>
& lt; div类=癲2”比;
这是div3
& lt;/div>
& lt;/body>
& lt;/html>
css部分
<代码类=" language-css ">/*元素选择器*/div {
宽度:50 px;
高度:50 px;
边界:1 px固体红;
背景:# FF0000;
}/* id选择器
id不可重复,唯一*/# d1 {
背景:水
}/*类选择器
可重复*/.d2 {
背景:黄色;
}
