1. html入门
<!-- 声明文档的类型 标记该文档为HTML5的文件 -->
<!DOCTYPE html>
<!-- 页面的根节点 -->
<!-- html中的标签都是闭合标签 闭合标签包含 双闭合和单闭合
双闭合：<html></html>
单闭合：<meta />
-->
<html>
<head>
<!-- 声明头部的元信息 对我们文档 规定编码格式 -->
<meta charset="utf-8" />
<!-- 包含头部的信息 是一个容器 包含 style title meta script link等 -->
</head>
<body>
<!-- 包含浏览器显示的内容标签 div p a img input等等 -->
这是我们的文档结构
</body>
</html>
2. head标签相关内容
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 文档的标题、编码方式及URL等信息,这些信息大部分是用于提供索引,辩认或其他方面的应用（移动端） -->
<!-- 文档的标题 -->
<title>drfung</title>
<!-- 常用两个属性
http-equiv:它用来向浏览器传达一些有用的信息，帮助浏览器正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
-->
<!--指定文档的内容类型和编码类型 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!-- 5秒之后 重定向 到指定的网站 -->
<!-- <meta http-equiv="refresh" content="5;URL=https://www.baidu.com"/> -->
<!--告诉IE浏览器以最高级模式渲染当前网页-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
<!-- 为了我们的SEO优化 工作的时候下面这两句 要写-->
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="drfung">
<!-- 定义我们的网站图标 -->
<link rel="icon" href="./fav.ico">
<!-- 引入外部样式表 -->
<link rel="stylesheet" type="text/css" href="./index.css">
<!-- 定义内部样式表 -->
<style type="text/css">
</style>
<!-- 定义内容脚本文件 -->
<script type="text/javascript">
</script>
<script src="./index.js"></script>
</head>
<body>
</body>
</html>
3. 常用标签
- 常用标签一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用标签一</title>
</head>
<body>
<div class="p1">
<p style="height: 2000px" id="p1">顶部</p>
</div>
<div>
<!--body相关标签-->
<!--heading: 标题h1~h6,没有h7-->
<!--块级元素: 1.独占一行; 2 可以设置宽高-->
<h1>世界杯时间</h1><h2>世界杯时间</h2>
<h3>世界杯时间</h3>
<h4>世界杯时间</h4>
<h5>世界杯时间</h5>
<h6>世界杯时间</h6>
<h7>世界杯时间</h7>
</div>
<div class="p1">
<p><strong>大英帝星</strong>凯恩<br>2018年<span>人工智能</span></p>
<hr>
<p>拉玛西亚学院立志帮助有志向的年轻人通过努力学习 ,<s>金融分析</s>,人工智能等互联网最前沿技术</p>
</div>
<div class="anchor">
<!--a标签属于行内标签: 在同一行内显示 设置宽高 不起作用-->
<!--_self: 默认值,在当前标签打开资源-->
<!--_blank: 在新的标签打开资源-->
<a href="https://hub.docker.com" target="_blank" title="docker">Docker Hub</a>
<a href="./a.zip">本地文件</a>
<a href="mailto:recoba01@163.com" style="width:300px;height: 40px;">联系我们</a>
<!--返回页面顶部内容-->
<a href="#">跳转到顶部</a>
<!--跳转到指定id-->
<a href="#p1">跳转到顶部段落标签</a>
<!--javascript:是在执行a标签动作时,执行一段javascript代码;而javascript:;表示什么都不做;-->
<a href="javascript:alert();">alert</a>
<a href="javascript:;">nothing</a>
</div>
<div class="lists">
<!--无序列表-->
<ul type="none">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<!--有序列表-->
<ol style="list-style: none">
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
</div>
<div class="image">
<!--可以设置行高 可以在一行内显示 叫行内块标签-->
<img src="./homesmall.png" alt="python pics" style="width: 200px;height: 200px;">
<img src="./homesmall2.png" alt="linux pic" style="width: 200px;height: 200px;">
</div>
<div>
<!--小练习: 显示两张图片,独占一行,鼠标移上去为小手状态-->
<p><a href="https://sina.com.cn"><img src="./homesmall.png" alt="python pics"></a></p>
<p><a href="https://sina.com.cn"><img src="./homesmall2.png" alt="linux pics"></a></p>
</div>
</body>
</html>
- 常用标签- table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--表格-->
<table border="1" cellpadding="0">
<thead>
<tr>
<th></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">上午</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>生物</td>
<td>化学</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>生物</td>
<td>化学</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>生物</td>
<td>化学</td>
</tr>
<tr>
<td rowspan="2">下午</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>生物</td>
<td>化学</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>生物</td>
<td>化学</td>
</tr>
<tr>
<td colspan="6">课程表</td>
</tr>
</tbody>
</table>
</body>
</html>
- 常用标签-表单提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单控件</title>
</head>
<body>
<!--form表单是一个块级标签-->
<form action="https://www.baidu.com">
<!--label标签是行内标签 input是行内元素-->
<p>
<label for="user">用户名:</label>
<input type="text" name="username" id="user" placeholder="请输入用户名:">
</p>
<p>
<label for="password">密码:</label>
<input type="text" name="password" id="password" placeholder="请输入密码:">
</p>
<!--单选框 checked会被默认选中 产生互斥效果name要相同-->
<p>
用户性别：
<input type="radio" name="sex" value="男" checked="">男
<input type="radio" name="sex" value="女">女
</p>
<!--复选框-->
<p>
用户爱好:
<input type="checkbox" name="fav" value="eat" checked="check">eat
<input type="checkbox" name="fav" value="drink">drink
<input type="checkbox" name="fav" value="play">play
<input type="checkbox" name="fav" value="happy">happy
</p>
<!--上传文件-->
<p>
<input type="file" name="textFile">
</p>
<!--文本域-->
<p>
自我介绍:
<textarea name="txt" id="" cols="30" rows="10" placeholder="welcome young men!"></textarea>
</p>
<!--下拉列表-->
<select name="sel" size="2" multiple="">
<option value="sz" selected>深圳</option>
<option value="bj">北京</option>
<option value="sh">沙河</option>
</select>
<p>
<!--显示普通的按钮-->
<input type="button" name="btn" value="提交" disabled="disabled">
<!--重置按钮-->
<input type="reset" name="">
<!--提交form表单使用 type=submit按钮-->
<input type="submit" name="btn" value="submit">
</p>
</form>
<button type="button">按钮</button>
</body>
</html>
4. 标签分类
- 块级元素: div p h1~h6 ol ul table from li
- 独占一行
- 可以设置宽高,如果设置了宽度和高度,就是当前的宽高,如果宽度和高度都没有设置,宽度就是父盒子的宽度,高度根据内容填充
- 行内元素: 在一行内显示,不能设置宽度和高度,宽度和高度根据内容填充.
- 行内块:
- 在一行内显示
- 可设置高
标签嵌套规则:
块元素可以包含内联元素或某些块元素,但内联元素却不能包含块元素, 只能包含其它的内联元素
有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是h1~h6 p
网友评论