前端与HTML｜ 青训营笔记

用户2467858144775
389 阅读6分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天

前端工程师是使用web技术栈解决多端图形用户交互功能的工程师，作为前端技术栈中最基础的HTML，能够熟练掌握使用十分重要。

重点内容

在本次课程中，我们主要关注的内容包括：html的介绍以及相关文档树介绍。

知识点介绍

什么是HTML

HTML(HyperText Markup Language) 不是一门编程语言，而是一种用来告知浏览器如何组织页面的标记语言。image.png一个html元素包括开始标签（Opening tag）、结束标签（Closing tag）、内容（Content）以及元素的属性（Attribute）。

html页面

分析html页面

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>页面标题</title>
  </head>
  <body>
    <h1>一级标题</h1>
    <p>段落内容</p>
  </body>
</html>
复制代码

分析html页面：

  1. <!DOCTYPE html>: 声明文档类型。标记当前html文件的版本，浏览器因此判断使用哪种渲染模式。
  2. <html></html>: <html>元素。文档的根标签，包裹了其他标签即整个页面。
  3. <head></head>: <head>元素。这个元素包含了想要在HTML中使用但又不想在页面中呈现的内容。
  4. <meta charset="utf-8">: 表明页面采取什么形式编码，如示例设置文档使用 utf-8 字符集编码。
  5. <title></title>: 设置页面的标题，在浏览器打开时显示在标签上。
  6. <body></body>: <body>元素。包含了页面中所有显示在页面上的内容，如文本，图片，音频等。

HTML语法

aa71dc5c8e45e820151795168d21bc2.jpg常见标签

元素作用
h1~h6标题标签，标题大小由h1~h6
ol有序列表，可以显示特定的项目顺序
ul无序列表，没有顺序号，使用缩进的形式表示一定的层次。
li列表项目的标记
dl被称为“定义列表”，在使用方法上相当于ul
dt&dd分别称为“定义标题”和“定义描述”，它们在使用方法上相当于li。

超链接标签: a

a 标签，也是行内元素，不是块级元素。必须具备href，表示点击后会跳转到哪个页面；打开方式：target，默认是_self,如果是_blank,则用新标签页打开。

链接的几种形式：

1、外部链接: href 引用其他网站的地址

<a href="https://www.bing.com">bing</a>
复制代码

2、内部链接: 网站内部页面之间的链接，写相对路径即可

<a href="a.html">跳转到 a.html</a>
复制代码

3、空链接: 是属于在开发阶段，有的链接具体的地址，还不确定，就可以使用 # 在 href 中占位

<a href="#">空链接</a>
复制代码

4、下载链接: href 对应的路径，是对应到一个普通文件 (不是 html 之类的)，就会触发下载操作

<a href="test.zip">点击下载</a>
复制代码

5、网页元素链接：可以给图片等任何元素添加链接 (把元素放到 a 标签中)。

<a href="http://bing.com">
    <img src="flower.png" alt="">
</a>
复制代码

6、锚点链接：可以快速定位到页面中的某个位置

在本页面内跳转，这个机制可以通过锚点链接来实现，也可以通过 js 来实现 (使用 js 实现可以加入一些动画效果)

禁止 a 标签跳转: <a href="javascript:void(0);"> 或者 <a href="javascript:;">

图片 img

img 是一个单标签 (不需要结束标签)。img里面可以写很多的属性，其中最重要的属性就是 src 属性，通过 src 描述图片具体所在的位置，src 可以是一个绝对路径，也可以是一个相对路径，还可以是一个网络路径

<img src="./flower.png" alt="">
<img src="E:\flower.jpg" alt = "小花">
<img src="https://...." alt="">
复制代码

其他属性

alt:替换文本：如果图片不能正常展示，就会用这个 alt 中的属性来表示图片，否则就不会显示 alt 中的内容

title：提示文本，鼠标放到图片上，就会有提示

width / height：控制宽度高度

border：边框，参数是宽度的像素，但是一般使用 CSS 来设定

表单标签

input

表单标签是用户和页面之间交互的重要手段，是让用户来 “输入”，
input 标签，有很多种形态，各种输入控件, 单行文本框, 按钮, 单选框, 复选框。 属性： type(必须有), 如 button, checkbox, text, file, image, password, radio 等.

name: 给 input 起名.

value: input 中的默认值

checked: 默认被选中. (用于单选按钮和多选按钮)

maxlength: 设定最大长度.

1、文本框

<form>
    <input type="text">
</form>
复制代码

2、密码框

单行文本框，但是可以用来输入密码

<input type="password">
复制代码

3、单选框

单选框之间必须具备相同的 name 属性, 才能实现 多选一 效果

<input type="radio" name="gender" > 男
<input type="radio" name="gender" checked = "checked"> 女
复制代码

搭配上 label 的单选框，id 属性。

<input type="radio" name = "gender" id = "male"> 
<label for="male">男</label>
<input type="radio" name = "gender" checked = "checked" id = "female"> 
<label for="female">女</label>
复制代码

4、复选框

可使用 checked 来表示默认选中。也可搭配 label 来实现点击文字

<input type="checkbox" checked = "checked"> 吃饭
<input type="checkbox"> 睡觉
<input type="checkbox"> 学习
复制代码

5、普通按钮

<input type="button" value="这是按钮">
复制代码

6、提交&清空按钮

<form action="test.html">
	<input type="text" name="username">
	<input type="submit" value="提交">
	<input type="reset" value="清空">
</form>

复制代码

8、选择文件

<input type="file">
复制代码

select

<body>
    <form>
        <select>
            <option>--请选择年份--</option>
            <option selected = "selected">2001</option> <!--默认选项-->
            <option>2000</option>
            <option>2001</option>
            <option>2002</option>
            <option>2003</option>

        </select>
        </form>
</body>

复制代码

使用 select 表示一个下拉菜单，每个菜单项是一个option，可以使用 selected 来表示默认的选项是啥

textarea

多行文本框。文本域中的内容，就是默认内容，注意空格也会有影响

<textarea name="" id="" cols="30" rows="10">
            
</textarea>
复制代码

文本标签

元素作用
b粗体字标签（与strong相似）
i斜体字标签（与em相似）
u下划线字体标签
br换行标签
p换段落标签，即换行之后插入一个空行，然后在下一行显示其后的文本。
center居中对齐标签，使段落或文字相对于上一层标记居中对齐。
pre预格式化标记，保留文字在源代码中的格式，页面中显示的和源代码中书写的格式效果完全一致。
hr水平分割线标签，用于段落与段落之间的分隔
font字体标记，可以通过该标记指定字体大小、颜色、字体等信息
cite用于引证、举例、通常用斜体字
em表示强调，通常为斜体字

内容划分

5ddf3c758d031dbba857ac1976d4ddd.jpg

文档树

DOM树

浏览器将HTML解析成树形的数据结构，简称DOM。 DOM 是文档对象模型 (Document Object Model) 的缩写。它是 HTML 文档的对象表示，同时也是外部内容（例如 JavaScript）与 HTML 元素之间的接口。 解析树的根节点是Document对象。

image.pngDOM树揭示了DOM对象之间的层次关系，这样就方便动态地对html文档进行增删改查。

CSS树

image.pngless这种预处理语言，就是借用DOM树的思想，来将less这种语法结构，转译成普通的css语法，最终我们用的还是普通的css语法构成的css文件

render树

浏览器在构造DOM树的同时也在构造着另一棵树-Render Tree。我们知道DOM树为javascript提供了一些列的访问接口（DOM API），但这棵树是不对外的。

render树的主要作用就是把HTML按照一定的布局与样式显示出来。从MVC的角度来说，可以将render树看成是V，dom树看成是M，C则是具体的调度者。

image.png具体显示的时候，每一个renderer体现了一个矩形区块的东西，即我们常说的CSS盒子模型的概念。每一个renderer还有一个很重要的属性，就是如何显示它，display。

image.png

个人总结

html知识较为零散，有许多标签在日常coding时很少使用，以及需要对一些属性需要加强熟悉使用。

引用参考

blog.csdn.net/qq_56884023… blog.csdn.net/qq_44598397…

avatar
文章
阅读
粉丝