1, 总体
资源: https://www.processon.com/view/link/5ad1c2d0e4b0b74a6dd64f3c
head 标签
title 显示网站的标题
meta 提供有关页面的原信息
link 链接 CSS 资源文件, 网站图标
style 定义内部样式表
script 链接脚本 JS 文件
body 标签
块级元素 div p h1-h6 ul ol li table form
行内元素 a span br i em strong label
行内块元素 img input
其他标签 br hr ...
特殊符号 > ...
table 表格标签
form 表单标签
标签特性
文档的头部描述了文档的各种属性和信息, 包括文档的标题, 编码方式及 URL 等信息,
这些信息大部分是用于提供索引, 辩认或其他方面的应用 (移动端) 等.
- <head lang='en'>
- <title > 标题信息</title>
- <meta charset='utf-8'>
- <link>
- <style type='text/css'></style>
- <script type='text/javascript'></script>
- </head>
- HTML:
- <!--en 能翻译网页 -->
- <HTML lang="en">
- 1.title:
- <!-- 文档的标题 -->
- <title > 路飞学城</title>
- 2.meta:
- <!-- 声明头部的元信息 对我们文档 规定编码格式 -->
- <meta charset="utf-8">
- <!-- 指定文档的内容类型和编码类型 -->
- <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
- <!-- 5 秒之后 重定向 到路飞学城的网站 -->
- <meta http-equiv="refresh" content="5;URL=https://www.luffycity.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="路飞学城">
- 3.link:
- <!-- 定义我们的网站图标 -->
- <link rel="icon" href="fav.ico">
- <!-- 引入外部样式表 -->
- <link rel="stylesheet" type="text/css" href="index.css">
- 4.style:
- <!-- 定义内部样式表 -->
- <style type="text/css"></style>
- 5.script:
- <!-- 定义内部脚本文件 -->
- <script type="text/javascript"></script>
- <!-- 引入外部 js-->
- <script src="index.js"></script>
1. 块级元素
独占一行, 可设宽高, 如果不设宽度, 则是浏览器的宽度
( div p h1-h6 ul ol li table form )
解释:
- <div > 盒子标签</div>
- <!--h: 标题标签, 标题 h1-h6 没有 h7 不要随意的通过 h 标签改变文字的大小 h 标签换行了 -->
- <h6 > 路飞学城</h6>
- <!--p: 段落标签 块级元素 独占一行 -->
- <p > 我们</p>
- ul li
- <!-- 列表标签, 无序列表 默认是实心圆 disc-->
- <ul type="square"><li></li></ul>
ul 标签的属性:
type: 列表标识的类型
disc: 实心圆(默认值)
circle: 空心圆
square: 实心矩形
none: 不显示标识
- ol li
- <!-- 列表标签, 有序列表 默认是数字 -->
- <ol style="list-style: none"><li></li></ol>
ol 标签的属性:
type: 列表标识的类型
1: 数字
a: 小写字母
A: 大写字母
i: 小写罗马字符
I: 大写罗马字符
列表标识的起始编号默认为 1
2. 行内元素
在一行内展示, 不能设置宽高, 它的宽高是根据内容去填充
( a span br i em strong label )
解释:
- <!-- a: 超链接标签, 标签属于行内标签: 在一行内展示 -->
- <!--
- _self: 默认值: 在当前网站打开资源
- _blank: 在新的网站打开资源
- -->
- <a href="https://www.luffycity.com" target="_blank" title="luffy">路飞学城</a>
- <a href="a.zip">下载压缩包</a>
- <a href="mailto:zhaoxu@tedu.cn">联系我们</a>
- <a href="#">跳转到顶部</a>
- <a href="#p1">跳转到顶部的段落标签</a>
- <!--
- javascript: 是表示在触发 < a > 默认动作时, 执行一段 JavaScript 代码
- javascript:; 表示什么都不执行, 这样点击 < a > 时就没有任何反应. 把 a 的默认动作取消了
- -->
- <a href="javascript:alert(1)">内容</a>
- <a href="javascript:">内容吧</a>
3. 行内块元素
在一行内展示, 可设宽高
(img input)
解释:
- <img /> 图片标签 图片的格式可以是 PNG,jpg 和 gif
- <img src="图片地址" alt="图片加载失败时显示的内容" title = "提示信息" />
- <img src="homesmall1.png" alt="python 的图片" style="width: 200px; height: 200px;" />
- <br> 换行
- <hr> 分割线
- <b></b > 加粗
- <i></i > 斜体
- <u></u > 下划线
- <s></s > 删除线
- <sup></sup > 上标
- <sub></sub>
- <em></em > 斜体
- <strong></strong > 粗体
- > >
- <<
- & &
- ¥ ¥
- <table border="1" cellspacing="0">
- <thead>
- <tr>
- <th > 星期一</th>
- <th > 星期二</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td > 语文</td>
- <td > 数学</td>
- </tr>
- </tbody>
- </table>
- --------------------------
- <table border="1" cellspacing="0">
- <thead>
- <tr>
- <th></th>
- <th > 星期一</th>
- <th > 星期二</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td rowspan="2">上午</td>
- <td > 语文</td>
- <td > 数学</td>
- </tr>
- <tr>
- <td > 语文</td>
- <td > 数学</td>
- </tr>
- <tr>
- <td rowspan="1">下午</td>
- <td > 语文</td>
- <td > 数学</td>
- </tr>
- </tbody>
- <tfoot>
- <tr>
- <td colspan="3">课程表</td>
- </tr>
- </tfoot>
- </table>
- -----------------------
- <form action="http://www.baidu.com" method="get">
- <p>
- <label for="user">用户名:</label>
- <input type="text" name="username" id="user" placeholder="请输入用户名">
- </p>
- <p>
- <label for="password">密码:</label>
- <input type="password" name="password" id="password" placeholder="请输入密码">
- </p>
- <p>
- <input type="radio" name="sex" value="男">男
- <input type="radio" name="sex" value="女" checked > 女
- </p>
- <p>
- <input type="checkbox" name="checkfav" value="吃" checked > 吃
- <input type="checkbox" name="checkfav" value="喝">喝
- <input type="checkbox" name="checkfav" value="玩" checked > 玩
- <input type="checkbox" name="checkfav" value="乐">乐
- </p>
- <p>
- <input type="file" name="textfile">
- </p>
- <p>
- <textarea name="txt" id="txt_id" cols="30" rows="10" placeholder="请做自我介绍"></textarea>
- </p>
- <p>
- <label for="sel">城市:</label>
- <select name="sel" id="sel">
- <option value="北京">北京</option>
- <option value="上海" selected > 上海</option>
- <option value="广州">广州</option>
- <option value="深圳">深圳</option>
- </select>
- </p>
- <p>
- <label for="mul_sel">城市:</label>
- <select name="mul_sel" id="mul_sel" size="3" multiple>
- <option value="北京">北京</option>
- <option value="上海" selected > 上海</option>
- <option value="广州">广州</option>
- <option value="深圳">深圳</option>
- </select>
- </p>
- <p>
- <input type="button" name="btn" value="提交" disabled>
- <input type="reset">
- <input type="submit" name="btn" value="submit">
- </p>
- </form>
- <div><div></div><h1></h1><p><p></div> ?
- <a href="#"><span></span></a> ? a 可以包含 img
- <span><div></div></span> ?
- <p><ol><li></li></ol></p> ?
- <p><div></div></p> ? 个别例外, 大家注意
- ------------------------------
- <ul>
- <li>
- <ul>
- <li>
- <div>
- </div>
- </li>
- <li>
- <ol>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- </ol>
- </li>
- </ul>
- </li>
- </ul>
来源: http://www.bubuko.com/infodetail-2815517.html