1-1 HTML基本概念 · 前端学习笔记

# 1.HTML和CSS的概念 - HTML构成网页的结构，即网页由一个个HTML标签构成 - CSS样式负责修饰HTML标签 # 2.HTML标签的初认识 ~~~ //开始标签 <body> </body> //结束标签 ~~~ - HTML中不区分大小写，但是我们一般都使用小写 - HTML中的注释不能嵌套 - HTML标签必须结构完整，要么成对出现，要么自结束标签 - HTML标签可以嵌套，但是不可以交叉嵌套。自结束标签只能嵌套在成对标签里面，不能反过来。 ~~~ 今天天气真不错 今天天气真不错 （错误） ~~~ - HTML标签中的属性必须有值，且值必须加引号（单引号双引号都可以） # 3.HTML的特点：语义化 [https://blog.csdn.net/njcgosling/article/details/47130723](https://blog.csdn.net/njcgosling/article/details/47130723) # 4.HTML的常见标签 > header h1~h6 标题标签 ![](https://i.loli.net/2019/02/27/5c76833ed70da.png) > paragraph p 段落标签 > p标签中的文字，默认会独占一行，并且段与段之间会有一个间距 ~~~ hello world ~~~ > images img 单标签特殊 ~~~ <img src="bg.jpg" alt=""> ~~~ > center标签居中 ~~~ <center> </center> ~~~ - 分标签是为了方便浏览器的渲染引擎解析 - ctrl+/ 是注释快捷键 - shift+alt+ ↓ 快速复制粘贴 # 5.a标签的四种作用 > 使用a标签来创建一个超链接，最常用最重要的一个属性是href > herf属性：指向连接跳转的目标地址，可以写一个相对路径也可以写一个完整的地址。 ~~~ <a href="http://www.baidu.com" >百度一下</a> <a href="index.html" >回到首页</a> ~~~ target注意含义和使用: - 使用target属性，你可以定义被链接的文档在何处显示。可以用来指定打开链接的位置 a标签中的target属性可选值： - - _self，表示在当前窗口打开（默认值） - _blank，在新的窗口中打开链接 - 可以设置成一个内联框架的name属性值，链接将会在指定的内联框架中打开 ~~~ <a href="demo03.html" target="jack" >点击我更换</a> <iframe src="demo02.html" name="jack"></iframe> ~~~ 效果图： ![](https://i.vgy.me/z5EHXE.gif) 下面的这行会在新窗口打开文档： ~~~ <a href="http://www.baidu.com" target="_blank">Visit Baidu!</a> ~~~ 下面的这行会定位到锚点： ~~~ <a href="#h1"> 回到id=h1的锚点 </a> ~~~ # 特殊字符 ~~~ 在HTML中，一些如这种特殊字符是不能直接使用，需要使用一些特殊的符号来表示这些特殊字符，这些特殊符号我们称为实体（转义字符串）浏览器解析到实体时，会自动将实体转换为其对应的字符实体的语法： &实体的名字; < < > > 空格   版权符号 © ~~~