文章目录
HTML发明
HTML是由 Tim Berners-Lee 于1990年左右发明出来，让每个人输入网址就能看到网页：上网冲浪
HTML起手式
- 生成HTML基本结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="id=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
- HTML基本结构说明
<!DOCTYPE html>：文档类型<html lang="en"></html>：<html></html>：根标签，所有的内容都必须写在该标签内lang="en":设置页面的语言
<head></head>：设置页文档的一些信息，该标签内的代码不会在页面中显示<meta charset="UTF-8">：文件的字符编码，UTF-8支持所有语言<meta name="viewport" content="width=device-width, initial-scale=1.0">：设置视口，禁止页面缩放<meta http-equiv="X-UA-Compatible" content="id=edge">：告诉IE使用最新的内核<title></title>：网页的标题<body></body>：页面显示代码书写区域
常用的章节标签
-
标题标签：h1~h6
- 特点：文字加粗，字体按从小到大依次递减
<body> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> </body> -
章节标签：
<section></section> -
文章：
<article></article> -
段落标签：
<p></p> -
头部标签：
<header></header> -
脚部标签：
<footer></footer> -
主要内容：
<main></main> -
旁支内容：
<aside></aside> -
块级元素，用来划分：
div
常用内容标签
-
有序列表：
ol + li- 在li标签中写入内容
- 会根据
li标签，在内容前面自动生成数字，并依次递增
<ol> <li>项目 1</li> <li>项目 2</li> <li>项目 3</li> </ol> -
无序列表：
ul + li- 在li标签中写入内容
- 会根据
li标签,在内容前面自动添加一个圆点
<ul> <li>项目 1</li> <li>项目 2</li> <li>项目 3</li> </ul> -
自定义列表：
dl + dt + dddl：描述性 定义性列表dt：被描述的对象dd：描述内容
<dl> <dt>项目1</dt> <dd>项目1的描述1</dd> <dd>项目1的描述2</dd> </dl> -
预定义格式的文本：
pre- 按照代码中书写的编排格式来展示
-
code：呈现一段计算机代码，默认是以浏览器的的默认等宽字体显示
-
水平分割线：
hr<p>段落内容1</p> <hr> <p>段落内容2</p> -
换行：
br -
链接标签：
ahref属性：超链接指向的 URL 或其片段target属性：链接的的打开方式
<!-- 这里a标签指向一个外部链接并且在新窗口打开 --> <a href="http://www.baidu.com" target="_blank">点击此处在新窗口打开百度网址</a> -
文字倾斜：
em<p> 真是正常显示文本<em>此处文字倾斜显示</em> </p> -
文字加粗：
strong<p> 真是正常显示文本<strong>此处文字倾斜显示</strong> </p> -
内联引用：
quote -
块级引用：
blockquotequote与blockquote的区别：quote可以在一行内显示，blockquote会自动换行，在下一行显示
标签的全局属性
-
class：给标签划分类，值自定义
<div class="one"></div> -
contenteditable：可以让展示页面的文字可被编辑，无值
<div contenteditable></div> -
hidden：隐藏元素，无值
<--! 该div的内容可以被用户编辑 --> <div class="middle" hidden></div> -
id：页面唯一的元素。重复定义时，不会报错，推荐直接使用class
<div id="one"></div> -
style：样式属性，优先级高于 CSS
-
tabindex：设置键盘按 tab 键就会根据设置的数值依次选中，数值越大越靠后
- 注意点：0为最后一个
- -1为不能跳转的位置
<--! 按下tab聚焦到此处 --> <div tabindex="1">1</div> <--! 不参与导航 --> <div tabindex="-1">不参与导航</div> <--! 最后被聚焦 --> <div tabindex="0">最后被聚焦</div> -
title：鼠标移动到元素上显示的内容
<div title="鼠标移动到此处会显示该内容">鼠标移动到此处会显示title内容</div>
扩展内容
style中选择 class 和 id
<style>
.class值 {}
#id值{}
</style>
<body>
<div class="one"></div>
<div id="two"></div>
</body>
让style标签显示出来，并且能被编辑
- 注意点：style标签必须在body标签内，并且把sisplay设置为block
<body>
<style contenteditable>
style{display: block; border: 1px solid red}
</style>
</body>
标签默认样式查找
- 打开浏览器开发者工具 => Elements => Style =>有看到
*user agent styleshee*就是标签的默认样式
文本单行显示，溢出用…代替
<style>
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden
</style>
897
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
