HTML页面结构
- 关于HTML：超文本标记语言，简称HTML，是一种用于创建网页的标准标记语言。HTML是一种基础技术，常与CSS、Javascript一起被众多网站用于设计令人赏心悦目的网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件，并将其渲染成可视化网页
- 发展：HTML3.2—HTML4.0—HTML4.01—HTML5（2014.10）
- 一个典型的HTML5／4页面
- HTML vs XML vs XHTML
- HTML，超文本标记语言，是语法较为松散的、不严格的Web语言；
- XML，可扩展标记语言，主要用于存储数据和结构参考（用于传输数据，需要自行定义标签）
- XHTML，可扩展超文本标记语言，基于XML，作用与HTML类似
- 表现内容、样式、行为分离
- 写HTML的时候先不管样式，重点放在HTML的结构和语义化上，让HTML能体香页面结构或者内容，之后再去写样式
- 写JS的时候，尽量不要用JS去直接操作样式，而是通过给元素添加删除class来控制样式变化
- HTML内不允许出出现属性样式，尽量不要出现行内样式
- 语义化HTML
- 语义化HTML是一种编写HTML的方式，选择合理的标签、使用合理的代码结构，便于开发者阅读，同时让浏览器的爬虫和机器很好的解析
HTML常见标签（1）
| 标签 | 含义 |
|---|---|
| h1～h6 | 标题，h1代表页面最大的标题，h2代表二级标题。。。 |
| p | 段落，表示大段文字 |
| a | 链接，链接到一个地址 |
| href=“#”某点，”#about”跳到页面上这一点，”/getCourse”相对路径 | |
| target=“_blank”在新窗口打开，默认在当前页面刷新；“mypage”在页面嵌入的小框里面打开新页面 | |
| title=”“在不去点击的的情况下展示的文字 | |
| img | 展示一张图片 |
| src=‘地址’ | |
| alt=‘’万一地址有问题展示一点东西，或者也可以备注 | |
| 只闭合标签，前面不需要加“／” | |
| div | 语义为“一大块”，用于划分区块，使页面更加清晰 |
| id=“header””content””footer”;id:给一个元素起个名字，唯一的，相当于身份证号，每个id就是不一样的，根据当前的整个功能去写 | |
| class：代表一类的东西，不同元素都可以叫一个class | |
| ul, li | 无序列表，用于表示并列的内容；ul的直接元素是li，可以嵌套；常常一起使用；ul的直接子元素就是li |
| ol, li | 有序列表，用于表示带有步骤或者编号的并列内容 |
| dl, dt, dd | 用于展示一系列“标题：内容”的场景 |
| button | 按键 |
| strong | 非常重要 |
| em | 需要强调一下 |
| span | 对于块级元素，相对里面的一些东西进行一些控制，只是在上面加一些标记 |
HTML常见标签（2）
| 标签 | 含义 |
|---|---|
| iframe | 用于嵌入一个页面，注意跨域操作问题（假如说当前的地址是同一个域名，后期可以用JS获取；但是如果不一样，只能获取） |
| table | 展示表格，不要用来做布局，thaed，tbody，tfoot，tr（一行），td（一列），th（表头的一列） |
| ！DOCTYPE | 文档对象模型，用HTML的标准来解析整个页面；混杂模式：不加，浏览器以自己的宽松方式去进行渲染；标准模式：加 |
| html | lang告诉浏览器用什么语言；当前是德语页面要不要翻译成中文，浏览器就谁根据这句话来看的 |
| head | 头信息，和内容展示无关的信息 |
| meta：charset=网络编码，会保存为一种编码格式，utf-8或者GBK，打开后需要把编码解析，如果猜对了就会好好展示，猜错了就是乱码 | |
| http-equiv=；content=“”用什么内核来渲染当前页面 | |
| name=“viewpoint” content=“”在移动端展示的时候会比较合理 | |
| name=“description”，content=““；name=”keywords“，content=”“，搜索引擎友好 |
- 注意
- 标签属性全部小些
- 标签要闭合，自闭合标签可以省略／
- 标题里不能有段落，段落里不能有标题
- 块级元素和行列元素
- 检查
- 块级元素需要占据整整一行；行列元素就只有它需要的那一点；
网友评论