html入门初体验
一、认识html页面的文档结构
| 标签 | 结构说明 |
|---|---|
| -<!DOCTYPE html> | 通知浏览器这是⼀个 HTML5 ⽂档,应始终写在第⼀⾏ |
| -<html>…</html> | 根标签,或叫根元素,整个 hmtl ⽂档内容都必须写到这对标签中 |
| -<html lang="en"> | 通知搜索引擎 html ⽂档使⽤的编写语⾔,如果是中⽂建议改成:<html lang="zh-CN"> |
| <head>…</head> | 供浏览器和搜索引擎使⽤,描述字符编码集,视⼝与⻚⾯标题,⽤户并不感兴趣 |
| <meta> | 设置⻚⾯元素数据, 所谓元数据, 就是描述某种特定信息的数据 |
| <meta charset="UTF-8"> | 通知浏览器 html ⽂档编写语⾔所属的字符编码集,最流⾏的是UTF-8,已成⾏业标准 |
| <meta name="viewport" content="..." /> | 下⾯三⾏是对它的解读name="viewport" 设置视⼝(即可视区屏幕)如何显示这个⻚⾯, 例如是否允许缩放这个⻚⾯initial-scale=1.0 设置⻚⾯初始绽放⽐例,1.0表示原样 1:1 显示,不允许有任何绽放 |
| <title> | 显示在浏览器标签上的⽂本, 指定当前⻚⾯的标题, 这个标签对 SEO ⾮常重要 |
| <body>…</body> | ⻚⾯主体内容,允许或希望⽤户的内容都应该写到这⾥,⽤户也只对这⾥的内容感兴趣 |
| <!— 注释内容 -> | 注释⽤来描述标签功能或⽤途,它的内容不要出现在显示的⽹⻚中, 只会出现在 html 源代码中 |
二、html元素的三大通用属性（id,class,style）
| 代码 | 属性名 | js取值方式 | style设置方式 | 优先级 |
|---|---|---|---|---|
| class | 类属性 | document.GetelementsByClassName(“class名”) | .class名 | 最低 |
| id | id属性 | document.GetelementById(“id名”) | #id名 | 中 |
| style | 内联样式 | 无 | 无 | 最高 |
- 标签选择器：如：<p>代表p元素
js取值方式：getelementsByTagName("P")
三、认识元素，类，id及其样式规则
元素
- 元素由开始标签
元素名加结束标签/元素名组成 - 元素分为置换元素，由双标签组成，如
<html>文档内容……</html>和非置换元素，由单标签组成，如<p 行内容…… /p> - 元素内可含有元素名、属性、样式、显示内容等具体信息，JS可以获取及设置元素信息，用stlye来定义元素的样式规则
- 元素由开始标签
类(class)
- 类是指具体共同特征的元素集合，用
class来表示，如：<H1 class="h1_class">主题</H1><H2 class="h2_class">小节标题</H2>
- class的作用，JS可以取相同类名的元素集合，统一获取及设置多元素信息。通过style设置多元素样式。
- 类是指具体共同特征的元素集合，用
id标签
- id是指为一个元素设置一个标签名，为了能让JS准确获取指定元素，用户必须保证id的唯一性，如文档中存在多个同名id,浏览器不会报错，但JS只能取第一个元素作为有效元素，注意：style可以准确识别多个同名ID。
