<!DOCTYPE html><html><head><title>h1</title><metahttp-equiv="keywords"content="keyword1,keyword2,keyword3"><metahttp-equiv="description"content="this is my page"><metahttp-equiv="content-type"content="text/html; charset=UTF-8"><linkrel="stylesheet"type="text/css"href="./styles.css"></head><body>
This is my HTML page. <br><!-- 换行标签 -->
1.换行标签<br/><!-- 标题标签 --><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6><!--段落标签 --><p>中国地质大学</p><!--水平线,可以设置颜色color,宽度width,高度size,对其方式 align--><hr></hr><!--斜体标签标签 --><i>中国地质大学<br/></i><!--字体标签 ,设置颜色,字体,大小(数值%)--><!-- #值1值2值3,每个值00~FF --><fontcolor="red"size="10"face="楷体">中国地质大学<br/></font><fontcolor="#2623F1"size="10"face="楷体">中国地质大学<br/></font><!--
<center>
<font color="#2623F1" size=50% face="楷体">中国地质大学<br/></font>
</center>
--><fontcolor="#2623F1"size=50%face="楷体">中国地质大学<br/></font><!--字体加粗 --><b>中国地质大学<br/></b></body></html>
<!DOCTYPE html><html><head><title>h.html</title><metahttp-equiv="keywords"content="keyword1,keyword2,keyword3"><metahttp-equiv="description"content="this is my page"><metahttp-equiv="content-type"content="text/html; charset=UTF-8"><!--<link rel="stylesheet" type="text/css" href="./styles.css">--></head><body><h1>中国地质大学</h1><hr></hr><p><fontcolor="red">中国地质大学(地大,China University of Geosciences,Beijing)</font>
,于1952年始建,坐落于北京市,由教育部直属、国土资源部共建,是以地质、资源、环境、地学工程技术、资源产业经济为特色,理、工、
文等多科协调发展的全国重点大学,是建国初期著名的“八大学院”之一,国家首批“211工程”"985工程优势学科创新平台”重点建设高校,
位列国家“双一流”世界一流学科建设高校。其前身是由北京大学、清华大学、天津大学等院校的地质系(科)合并组建的北京地质学院。
</p><hr></hr><fontcolor="gray"size="2"><center>
中国地质大学主页<br/>
学生:xxxx
</center></font>
This is my HTML page. <br></body></html>
<!DOCTYPE html><html><head><title>h3.html</title><metahttp-equiv="keywords"content="keyword1,keyword2,keyword3"><metahttp-equiv="description"content="this is my page"><metahttp-equiv="content-type"content="text/html; charset=UTF-8"><!--<link rel="stylesheet" type="text/css" href="./styles.css">--></head><body>
This is my HTML page. <br><!-- 图片标签 --><!-- 点击图片跳转,可以用a标签包裹图片标签 --><ahref="./h2.html"><imgsrc="Img/imge.jpg"align="left"alt="中国地质大学"width="100%"height="100"/></a><!-- 列表标签 有序、无序--><!-- 有序列表 ol ,可以通过type来设置前面的序号的符号--><oltype="A"><li>早晨</li><li>中午</li><li>下午</li><li>晚上</li></ol><!-- 无序列表 ul ,可以通过type来设置前面的序号的符号--><ultype="disc"><li>早晨</li><li>中午</li><li>下午</li><li>晚上</li></ul><!-- 连接标签 a来定义 ,也可以访问本地网页--><ahref="http://www.baidu.cn">百度一下</a><br/><!-- 重新打开一个页面,不在本页面打开 --><ahref="http://www.baidu.cn"target="_blank">百度一下</a><br/><ahref="./h2.html">本地网页</a><br/><!-- 点击图片跳转,可以用a标签包裹图片标签 --></body></html>
<!DOCTYPE html><html><head><title>h4.html</title><metahttp-equiv="keywords"content="keyword1,keyword2,keyword3"><metahttp-equiv="description"content="this is my page"><metahttp-equiv="content-type"content="text/html; charset=UTF-8"><!--<link rel="stylesheet" type="text/css" href="./styles.css">--></head><body><!-- 块标签 div span本身并没有什么效果,等,主要与css联合使用控制相关块的样式,布局等 --><!-- 行内标签,信息在一行显示,内联标签 --><span>中国地质大学 </span><!-- 每个标签div占满一整行,块级标签 自动换行 --><div>中国地质大学 </div><!--html5中, 语义化标签,用于包含span,div等,便于代码的可读性,统一通过css设置样式 --><!-- 头部 --><header></header><!-- 脚部 --><footer></footer><!-- 表格标签 table定义表格,tr定义行,td定义单元格,th定义表头单元格,也可以对单个行或单元格设置样式--><tableborder="1"cellspacing="0"bgcolor="gray"align="center"><!-- 表格表头 --><caption>学生信息表</caption><!-- 表头 --><thead></thead><!-- 表体 --><tbody></tbody><!-- 表尾 --><tfoot></tfoot><tr><th>学号</th><th>姓名</th><th>邮箱</th><th>地址</th></tr><tr><td>20151001</td><td>小明</td><td>example@163.com</td><td>中国</td></tr><tr><td>20151002</td><td>小李</td><td>example@163.com</td><td>中国</td></tr></table><tableborder="1"cellspacing="0"align="center"><tr><throwspan="2">学号</th><th>姓名</th><th>邮箱</th><th>地址</th></tr><tr><th>小明</th><th>example@163.com</th><th>中国</th></tr><tr><td>20151002</td><td>小李</td><!-- 合并单元格,单元格占两列 --><tdcolspan="2">example@163.com</td></tr></table>
This is my HTML page. <br></body></html>
<!DOCTYPE html><html><head><title>h5.html</title><metahttp-equiv="keywords"content="keyword1,keyword2,keyword3"><metahttp-equiv="description"content="this is my page"><metahttp-equiv="content-type"content="text/html; charset=UTF-8"><!--<link rel="stylesheet" type="text/css" href="./styles.css">--></head><body><!-- 可以通过table来进行布局,及表格的嵌套,可以避免单元格的合并操作 --><!-- 表单标签 :采集用户输入信息,和服务器交互--><!-- form :用于定义表单,定义一个范围,范围代表采集用户数据的范围,用于包裹需要用户输入的数据,就可以提交数据 --><formaction=""method="get"><!-- 属性action:指定提交数据的目的url;
method:指定提交方式,共7种,两种较常用,get,post
表单项数据的提交需要指定其name属性
-->
账号:<inputname="user-name"><br/>
密码:<inputname="password"><br/><br/><inputtype="submit"value="login"><br/><!-- get:请求参数会在地址栏显示,请求参数大小有限制 ,不安全--><!-- post:请求参数不会在地址栏显示 ,会封装在请求体中,请求参数大小没有限制 ,安全--><!-- 表单项标签 --><!--placeholder 用于在背景上显示提示信息 --><labelfor="user">账号:</label><inputtype="text"name="username"id="user"placeholder="输入账号"><br/>
密码:<inputtype="password"name="pwd"><br/><!-- 一组单选按钮,name需要一致 ,value用于区别提交的值-->
性别:<inputtype="radio"name="rd"value="man"> 男
<inputtype="radio"name="rd"value=women> 女<br/><!-- 复选框,name需要一致 ,value用于区别提交的值-->
爱好:<inputtype="checkbox"name="like"value="music"> 音乐
<inputtype="checkbox"name="like"value="game"> 游戏<br/><inputtype="submit"value="登录"><br/>
添加资源:<inputtype="file"name="file"><br/><!-- 隐藏域,用于提交相关数据 --><inputtype="hidden"><!-- 图片按钮,可以提交表单数据 --><inputtype="image"src=""><!-- color取色器按钮,data日期按钮,button按钮 ,邮箱按钮,数字按钮等--><!-- 下路列表 -->
籍贯:<select name= "address">
<optionvalue="1">湖北-武汉</option><optionvalue="2">湖南-长沙</option></select><br/><!-- 文本域 --><textarearows="5"cols="20"name="tetx"></textarea><br/></form>
This is my HTML page. <br></body></html>
<!DOCTYPE html><html><head><title>h6.html</title><metahttp-equiv="keywords"content="keyword1,keyword2,keyword3"><metahttp-equiv="description"content="this is my page"><metahttp-equiv="content-type"content="text/html; charset=UTF-8"><linkrel="stylesheet"type="text/css"href="./styles.css"></head><body><formaction=""method="post"><tableborder="1"align="center"width="500"><tr><td><labelfor="username">用户名</label></td><td><inputtype="text"name="username"id="username"></td></tr><tr><td><labelfor="password">密码</label></td><td><inputtype="password"name="password"id="password"></td></tr><tr><td><labelfor="email">邮箱</label></td><td><inputtype="email"name="email"id="email"></td></tr><tr><td><labelfor="name">姓名</label></td><td><inputtype="text"name="name"id="name"></td></tr><tr><td><labelfor="tel">电话号码</label></td><td><inputtype="text"name="tel"id="tel"></td></tr><tr><td><label>性别</label></td><td><inputtype="radio"name="gender"value="man"> 男
<inputtype="radio"name="gender"value="women"> 女
</td></tr><tr><td><labelfor="birthday">出生日期</label></td><td><inputtype="date"name="birthday"id="birthday"></td></tr><tr><td><labelfor="checkcode">验证码 </label></td><td><inputtype="text"name="checkcode"id="checkcode"><imgsrc=""></td></tr><tr><tdcolspan="2"align="center"><inputtype="submit"value="注册"></td></tr></table></form></body></html>
<!DOCTYPE html><html><head><title>css1.html</title><metahttp-equiv="keywords"content="keyword1,keyword2,keyword3"><metahttp-equiv="description"content="this is my page"><metahttp-equiv="content-type"content="text/html; charset=UTF-8"><linkrel="stylesheet"type="text/css"href="./styles.css"><!-- 外部样式,通过引入.css格式文件,来实现对样式的设置 --><linkrel="stylesheet"href="CSS/css.css"></head><!--所有的div标签样式都改变,内部样式,也可以通过import来带入外部样式.css文件来设置样式 --><style>@import"CSS/css.css";div{color:red;}</style><body><div>This is my HTML page. <br></div><div>
中国地质大学<br><div>学生:xxx<br></div></div></body></html>
<!DOCTYPE html><html><head><title>h8.html</title><metahttp-equiv="keywords"content="keyword1,keyword2,keyword3"><metahttp-equiv="description"content="this is my page"><metahttp-equiv="content-type"content="text/html; charset=UTF-8"><!--<link rel="stylesheet" type="text/css" href="./styles.css">--></head><!-- Id选择器优先级高于元素选择器 --><!-- 几种选择器的css代码写法 --><style>#ID{color:red;}.cls{color:blue;}div{color:green;}div p{color:gray;}div > p{border:1px solid;}input[type="text"]{border:5px solid;}a:link{color:pink;}a:hover{color:green;}a:active{color:yellow;}a:visited{color:red;}</style><body><!-- id选择器,选择具体id值的元素 --><divid="ID">中国地质大学</div><!-- 元素选择器, --><div>中国地质大学</div><!-- 类选择器, --><pclass="cls">中国地质大学</p><!-- 选择所有元素 *{}--><!-- 并集选择器 选择器1,选择器2{}--><!-- 子选择器 :筛选选择器1下的选择器2元素--><div><p>计算机视觉</p></div><p>计算机视觉</p><!-- 父选择器 --><div><p>大数据</p></div><p>大数据</p><!-- 属性选择器 --><inputtype="text"><inputtype="password"><br><!-- 伪类选择器,该元素有几种状态 --><ahref="#">链接</a>
This is my HTML page. <br></body></html>