Web前端从入门到放弃 第一周学习笔记
声明:本学习内容来自于 千锋教育_Web前端最全教程从入门到精通(HTML+CSS全套)!
一、HTML基本架构和属性
HTML的全称为“超文本标记语言(HyperText Markup Language)”,标准通用标记语言下的一个应用。是网页制作必备的编程语言。
HTML: 超文本 标记 语言
-
超文本:文本内容+非文本内容(图片、视频、音频等)
-
语言:编程语言
-
标记:也叫做标签,写法有两种:
①单标签 <header> ②双标签 <header></header>
-
创建标签的快捷键:单词 + tab →<单词>(自动识别单双标签)
-
标签的使用方式:可以上下排列,也可组合嵌套(标签不会对原文本造成影响,只是写结构的;至于其样式则需要CSS调解)
- 上下排列
- –组合嵌套
- 标签的属性:用来修饰标签的,设置当前标签的一些功能。
(标签的语法:<标签 属性1=“值1” 属性2=“值2”> )
- 上下排列
-
HTML常见标签:HTML5元素周期表(链接)
二、HTML初始代码
每个 .html 文件都有的代码叫做初始代码,要符合html文件的规范写法。在VScode当中,我们可以用快捷键“ ! + tab ”来创建初始代码(小白的话建议多用小手扣,等熟悉之后再使用快捷键!)
**hmtl初始代码:
<!DOCTYPE html> ————文档声明:告诉浏览器这是一个hmtl文件
<html lang="en"> ————html文件的最外层标签:包裹着所以html标签代码 ; “lang=en(zh-CN)”表示这是一个英文(中文)网站
<head>
<meta charset=“UTF-8”> ————元信息是编写网页中的一些辅助信息;charset=“UTF-8”是国际编码,防止网页出现乱码
<title>Document</title> ————设置网页标题
</head>
<body>
显示网页内容的区域
</body>
</html>
三、HTML中的注释
注释的语法: <!- -注释内容- ->(语法中没有空格,加空格是因为这个语法在csdn中也为注释语法,为方便显示才加了空格)
-注释的意义:
1. 把暂时不用的代码注释起来,方便以后使用。
2. 可以对开发人员进行提示。
-快捷添加注释与删除注释:
1. ctrl + / (不需要选中文本)
2. shift + alt + a (需要选中文本)
以上两种按两次可以取消注释
四、HTML语义化
所谓HTML语义化值得是吗,根据网页中内容过的结构,选择适合的HTML标签进行编写。好处:
- 在没有CSS的情况下,页面也鞥呈现很好的内容结构。
- 有利于SEO,让搜索引擎爬虫更好的理解网页。
- 方便其他设备解析(如品目阅读器、蛮人阅读器等)。
- 便于团队开发与维护。
-语义化标签:标题与段落
-
① 标题 为双标签 ,共有六个等级,其大小(或重要性依次递减):(注意原语法中无空格!)
1. <h 1>标题</h 1>
2. <h 2>标题</h 2>
3. <h 3>标题</h 3>
4. <h 4>标题</h 4>
5. <h 5>标题</h 5>
6. <h 6>标题</h 6>- 特别的——h1标题最重要,只能出现一次,而h5、h6标题则很少用
- ②段落也为双标签 ,语法为:< p>内容</ p>(注意原语法中无空格!)
五、文本修饰标签
- 强调 → 双标签:
- < strong></ strong> (粗体);例:强调
- < em></ em>(斜体);例:强调
- strong强调性大于em的强调性
- 下标:< sub></ sub> 例:x2+y2=z2
- 上标:< sup></ sup> 例:H2O
- 删除文本:< del></ del> 例:
原价399 - 插入文本: 例:现价199
- 注:一般情况下 ,删除文本都是和插入文本配合使用的。
六、图片标签与图片属性
< img>图片:< img src=" " alt=" " title=“ ” width=“ ” heigh=“ ”>
- src:图片地址;
- alt:当图片出现问题时,可以提示文字;
- title:提示信息;
- width、height:图片大小,单位为像素;
-注:当网速较慢时,设置大小可以获得更好的视觉体验。
七、引入文件的地址路径
-
相对路径:
- (.)在路径中表示当前路径
- (. .)在路径中表示上一级路径
-
绝对路径:
- 本地路径
- 网络路径
特别的,在windows下,本地路径中的斜线和反斜线表示路径时作用相同,但网络路径中不行,必须用 “ / ” 。
八、跳转链接
-
a→双标签,语法为:< a href=“”></ a>
- href 属性:链接的地址
- target 属性:可以改变链接打开的默认方式
- 默认情况下,在当前页面打开“ _self ”;新窗口为“ _blank ”
-
base→单标签,作用是改变链接的默认行为,一般写在“ head ”部分
1. <a href="http://www.baidu.com">文字</a> 2. <a href="http://www.baidu.com"> <img src="" alt=""> (图片) </a>
九、跳转锚点
类似于目录的跳转,使用同为 “ a 标签 ”
-
第一种用法:#号 与 id属性 形成的映射关系
例: <a href=“ # html ”> </a> 跳转按钮 对应 <h2 id=“ html ”> <h2> 跳转位置
-
第二种用法:** #号 **与 ** name属性 **形成的映射关系
例: <a href=“ # html ”> </a> 跳转按钮 对应 ** <a name=“ html ”> </a> ** (不作任何值, 相当于不占任何空间,则显示的是其下一行) <h2 id=“ html ”> <h2> 跳转位置
十、特殊符号
编写一些文本时,经常会遇到输入法无法输入的字符,如R(注册商标)、@(版权符)等,还有往一段文字中加入多个空格时,页面并不会解析出多个空格。这些无法输入和空格字符都是特殊字符,在HTML中,为这些特殊字符准备了专门的代码。
—特殊字符表
十一、无序列表
<ul><li>:列表的最外层容器、列表项 可用 type = “ ” 改变前面标记的样式(一般用CSS进行控制)
注:tl和li必须是组合出现 的让他们之间是不能有其他标签的
正确示范:<ul> 错误示范:<ul>
<li>无<li> <p>
<li>序<li> 无序
<ul> <p>
<ul>
十二、有序列表
<ol><li>:列表的最外层容器、列表项 其运用规范与无序列表相同 。
注:有序列表的使用较少,经常使用多个是无序列表,无序列表可以去代替有序列表。
十三、定义列表
<dl>:定义列表
<dt>:定义专业术语或名词
<dd>:对名词进行解释和描述
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dt>csS</dt>
<dd>层叠样式表</dd>
<dt>JavaScript</dt>
<dd>网页脚本语言</dd>
</dl>