<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>页头部分</title> </head> <body> <!-- 标题内容 --> <h1>标题h1~h6</h1> <!-- 文本内容 --> <p>文本内容</p> <!-- 横线部分 --> <hr color="red"> <!-- 居中和字体 --> <font size="5px"><center>你好</center></font> <!-- 图片 --> <img width="50%";height="50%" src="L:/pic/1.jpg"> <!-- 无序列表 --> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <!-- 有序列表 --> <ol> <li>猪</li> <li>狗</li> <li>牛</li> </ol> <!-- 超链接 _self:默认值，当前页打开 _blank：在空白页打开 --> <button><a href="http://www.baidu.com" target="_blank">点我</a></button> <!-- div和span： * div:每一个div占满一整行。块级标签 * span：文本信息在一行展示，行内标签 内联标签 --> <div>你好!div</div> <span>hello!span</span><br/> <!-- * table：定义表格 * width：宽度 * border：边框 * cellpadding：定义内容和单元格的距离 * cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、 * bgcolor：背景色 * align：对齐方式 --> <table width="1px" border="1px" cellpadding="10" cellspacing="0" align="left"> <!-- * tr：定义行 * bgcolor：背景色 * align：对齐方式 * td：定义单元格 * colspan：合并列 * rowspan：合并行 --> <tr> <th>数学</th> <th>语文</th> <th>英语</th> </tr> <tr> <td>100</td> <td>88</td> <td>92</td> </tr> </table> <hr> <br/> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单标签</title> </head> <body> <!-- form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围 * 属性： * action：指定提交数据的URL * method:指定提交方式 * 分类：一共7种，2种比较常用 get： 1. 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。 2. 请求参数大小是有限制的。 3. 不太安全。 post： 2. 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解) 2. 请求参数的大小没有限制。 3. 较为安全。 * 表单项中的数据要想被提交：必须指定其name属性 --> <form action="#" method="get"> <label for="username"> 用户名 </label>：<input type="text" name="username" placeholder="请输入用户名" id="username"><br> 密码：<input type="password" name="password" placeholder="请输入密码"><br> <!-- 单选框 --> 性别：<input type="radio" name="gender" value="male" > 男 <input type="radio" name="gender" value="female" checked> 女 <br> <!-- 复选框 --> 爱好：<input type="checkbox" name="hobby" value="shopping"> 逛街 <input type="checkbox" name="hobby" value="java" checked> Java <input type="checkbox" name="hobby" value="game"> 游戏<br> <!-- 选择文件 --> 图片：<input type="file" name="file"><br> <!-- 隐藏域 --> 隐藏域：<input type="hidden" name="id" value="aaa"> <br> <!-- 取色器 --> 取色器：<input type="color" name="color"><br> <!-- 年月日 --> 生日：<input type="date" name="birthday"> <br> <!-- 带时分秒的年月日 --> 生日：<input type="datetime-local" name="birthday"> <br> <!-- 邮件 --> 邮箱：<input type="email" name="email"> <br> <!-- 数字框 --> 年龄：<input type="number" name="age"> <br> <!-- 下拉框 --> 省份：<select name="province"> <option value="">--请选择--</option> <option value="1">北京</option> <option value="2">上海</option> <option value="3" selected>陕西</option> </select><br> 自我描述： <!-- 文本域 --> <textarea cols="20" rows="5" name="des"></textarea> <br> <!-- 提交 --> <input type="submit" value="登录" > <!-- 按钮 --> <input type="button" value="一个按钮" ><br> <!-- 图片 --> <input type="image" src="img/regbtn.jpg"> </form> </body> </html>
css选择器
1. 概念： Cascading Style Sheets 层叠样式表 * 层叠：多个样式可以作用在同一个html的元素上，同时生效 2. 好处： 1. 功能强大 2. 将内容展示和样式控制分离 * 降低耦合度。解耦 * 让分工协作更容易 * 提高开发效率 3. CSS的使用：CSS与html结合方式 1. 内联样式 * 在标签内使用style属性指定css代码 * 如：<div style="color:red;">hello css</div> 2. 内部样式 * 在head标签内，定义style标签，style标签的标签体内容就是css代码 * 如： <style> div{ color:blue; } </style> <div>hello css</div> 3. 外部样式 1. 定义css资源文件。 2. 在head标签内，定义link标签，引入外部的资源文件 * 如： * a.css文件： div{ color:green; } <link rel="stylesheet" href="css/a.css"> <div>hello css</div> <div>hello css</div> * 注意： * 1,2,3种方式 css作用范围越来越大 * 1方式不常用，后期常用2,3 * 3种格式可以写为： <style> @import "css/a.css"; </style> 4. css语法： * 格式： 选择器 { 属性名1:属性值1; 属性名2:属性值2; ... } * 选择器:筛选具有相似特征的元素 * 注意： * 每一对属性需要使用；隔开，最后一对属性可以不加； 5. 选择器：筛选具有相似特征的元素 * 分类： 1. 基础选择器 1. id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一 * 语法：#id属性值{} 2. 元素选择器：选择具有相同标签名称的元素 * 语法： 标签名称{} * 注意：id选择器优先级高于元素选择器 3. 类选择器：选择具有相同的class属性值的元素。 * 语法：.class属性值{} * 注意：类选择器选择器优先级高于元素选择器 2. 扩展选择器： 1. 选择所有元素： * 语法： *{} 2. 并集选择器： * 选择器1,选择器2{} 3. 子选择器：筛选选择器1元素下的选择器2元素 * 语法： 选择器1 选择器2{} 4. 父选择器：筛选选择器2的父元素选择器1 * 语法： 选择器1 > 选择器2{} 5. 属性选择器：选择元素名称，属性名=属性值的元素 * 语法： 元素名称[属性名="属性值"]{} 6. 伪类选择器：选择一些元素具有的状态 * 语法： 元素:状态{} * 如： <a> * 状态： * link：初始化的状态 * visited：被访问过的状态 * active：正在访问状态 * hover：鼠标悬浮状态 6. 属性 1. 字体、文本 * font-size：字体大小 * color：文本颜色 * text-align：对其方式 * line-height：行高 2. 背景 * background： 3. 边框 * border：设置边框，符合属性 4. 尺寸 * width：宽度 * height：高度 5. 盒子模型：控制布局 * margin：外边距 * padding：内边距 * 默认情况下内边距会影响整个盒子的大小 * box-sizing: border-box; 设置盒子的属性，让width和height就是最终盒子的大小 * float：浮动 * left * right