HTML入门笔记1

74 阅读3分钟

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内嵌窗口的情况