<!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<Html> 标签
原文地址：https://www.cnblogs.com/mapleins/p/10143998.html