1. HTML 是谁发明的
HTML的英文全称是 Hyper Text Marked Language,即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言。Tim Berners-Lee还成立了万维网联盟(W3C)
2. HTML起手式
- 只改lang为zh-CN,还有改title
- head里面
<meta charset="UTF-8">要写在head中的最前面,其他head里面的东西顺序无所谓 - head里面是存放无法在浏览器直接看见的内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的网页</title>
</head>
<body>
</body>
</html>
3. 常用的表章节的标签
h1~h6 标题
section
里面可以嵌套<h2> <h3> <p>
article 文章
p 段落
header 头部,用来加顶部广告
footer
- 用来写底部广告
- 或者版权声明(copy的权利)(©的写法: ©)
main 主要内容
aside 旁支内容
div 划分
4. 全局属性有哪些
class
- 可以写多个,比如
<div class="middle bordered"></div>
style
- 写在
<head>里面,格式:
<style >
.middle {
background: black;
color: white;
}
.bordered {
border: 10px solid red;
}
</style>
- 用于设置内联样式
- style的优先级: JS > HTML的style标签 > CSS
title
- 用来显示完整内容
- 比如我希望,当鼠标移动到省略的地方上时,可以浮动地显示完整内容xxx,就在标签中用属性 title="完整内容xxx"
- 关联的应用场景:文字比较多但是不想出现多行,只想在一行中显示,多出来的字变省略号。
调整css:
- white-space: nowrap; 不要换行
- text-overflow: ellipsis 溢出的部分用....
- overflow: hidden; 溢出的部分隐藏
id 不要用id这个属性,用class就够了
- id 用来表示全局唯一的标签, 但是id 的全局唯一性没有保障,就算有两个重复的 id,HTML 也不会提示写错了
- 加上id以后可以用js直接控制。不提倡用这种写法, 因为这种写法对id的命名有要求,比如用parent, top, self等命名id就不行。因为window里有很多已经定义好的全局属性,不可以和这些属性同名
tabindex(用的少)
- 正数,如tabindex=1 / 2/ 3/,表示按顺序访问(数字可以不连续)
- 0, 表示最后被tab访问
- -1, 表示不可被tab访问
contenteditable
- 让用户可以直接编辑内容,比textarea好用
hidden
- 隐藏标签
5. 常用的内容标签
- hr水平分隔线
- br 换行
- ol li 有序列表
- ul li 无序列表
- dl + dt 要描述的对象 + dd 要描述的内容
- em和strong表示强调。em 表示语气上的强调,strong 表示内容本身很重要
- quote 行内引用
- blockquote 换行的引用
pre
- HTML 代码里的多处空格、回车、tab 等内容,默认会被转化为一个空格
- 如果想保留多处空格、回车、tab等,就要用pre
- 通常与code标签配合使用
code
<code></code>代码- 如果需要写换行的代码,嵌套一个pre标签即可
<pre><code>var aaa = 1; console.log(a)</code></pre>
a标签
herf
a链接的地址 取值:
1. 网址: //www.baidu.com 推荐使用这一种写法。放进浏览器会自动补全
2. 路径:
- 绝对路径:/a/b/c,
- 相对路径:index.html和./index.html
3. 伪协议:
-
javascript:代码; 【需要写冒号和分号】应用场景:希望点击a标签之后页面不刷新也不返回到顶部,什么也不做:
<a href="javascript:0;"></a>这就相当于执行一段没有意义的js代码 -
mailto:邮箱
<a href="mailto:123@qq.com"></a> -
tel:手机号
<a href="tel:123456789"></a>
4. id: href=#id名,可以跳转到id名为Id的标签
如<p id="xxxx"></p>, <a href="#xxx"></a>就可以定位到这个p标签
target
- 决定是在本页面还是新开一个页面打开链接
- 取值:系统内置的名字:
-
a_blank 打开新页面
-
a_self 在当前页面打开
-
a_top 顶部页面打开
-
a_parent 在父级页面打开, 3和4适用于有Iframe内嵌窗口的情况
-