H5：入门笔记一

2021-01-19 本文已影响0人春暖花已开

背景： 老板让我们客户端必须出两个人转前端，其他同事都不是太愿意转，于是就有了以下转前端学习的记录了😭。学习资料全部来源于网络资源，在此感谢网友的分享。

浏览器内核

浏览器内核可以分成两部分：渲染引擎和 JS 引擎。
渲染引擎： 它负责取得网页的内容（HTML、XML、图像等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。
JS 引擎： 解析 Javascript 语言，执行 javascript 语言来实现网页的动态效果。

HTML

文档类型<!DOCTYPE>

<!DOCTYPE html>

<!DOCTYPE>标签位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范，必需在开头处使用<!DOCTYPE>标签为所有的XHTML文档指定XHTML版本和类型，只有这样浏览器才能按指定的文档类型进行解析。

字符集

<meta charset="UTF-8" />

UTF-8 是目前最常用的字符集编码方式，为了避免出现字符集不统一而引起乱码的情况，所以统一使用UTF-8。

骨架结构

<html>
    <head>
        <title></title>
    </head>

    <body>
    </body>
</html>

骨架结构

常用标签
- 标题标签
```
  <h1></h1>
  <h2></h2>
  <h3></h3>
  <h4></h4>
  <h5></h5>
  <h6></h6>
```
说明： h1 标签因为重要，尽量少用。一般h1 都是给logo使用，或者页面中最重要标题信息。
- 段落标签（paragraph）
```
<p>  文本内容  </p>
```
是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。
- 水平线标签（horizontal）
```
<hr />  是单标签
```
在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标签来完成，<hr />就是创建横跨网页水平线的标签。
- 换行标签（break）
```
<br />
```
在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标签
- div span标签（div：division）
```
<div> 这是div </div>    <span>这是span</span>
```
div 和 span 是没有语义的，是网页布局主要的2个盒子。

input 控件
<input />标签为单标签，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。除了type属性之外，<input />标签还可以定义很多其他的属性，其常用属性如下表所示。

input 控件
textarea控件
如果需要输入大量的信息，就需要用到<textarea></textarea>标签。通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：

<textarea cols="每行中的字符数" rows="显示的行数">
  文本内容
</textarea>

表单域
在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：

<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>

1. Action：在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。
1. method：用于设置表单数据的提交方式，其取值为get或post。
1. name：用于指定表单的名称，以区分同一个页面中的多个表单。
  注意： 每个表单都应该有自己表单域。
文本标签
文本标签
标签属性

<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>

图像标签（img）

<img src="图像URL" />

图像标签

链接标签（anchor）

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

href：（Hypertext Reference）用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。

target：用于指定链接页面的打开方式，其取值有 self 和 blank 两种，其中 self 为默认值，blank为在新窗口中打开方式。

注意：
- 1. 外部链接，需要添加 http://；
- 2. 内部链接，直接链接内部页面名称即可。比如 <a href="index.html"> 首页 </a >
- 3. 如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接；
- 4. 不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

锚点定位
通过创建锚点链接，用户能够快速定位到目标内容。

1.使用“a href=”#id名>“链接文本"</a>创建链接文本（被点击的）
<a href="#two">   

2.使用相应的id名标注跳转目标的位置。
<h3 id="two">第2集</h3>

- base 标签
base 可以设置整体链接的打开状态。base 写到 `<head>  </head>` 之间，如把所有的连接都默认添加 target="_blank"：

<head>
    <base target="_blank"/>
</head>

- 特殊字符标签
![特殊字符标签](https://img.haomeiwen.com/i2028539/b7777a1646678790.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


- 注释标签
```
<!-- <div> 这是头部 </div> <span>今日价格</span> -->
```
注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，也会被下载到用户的计算机上，查看源代码时就可以看到。

路径：相对路径和绝对路径
- 相对路径
  以引用文件的网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对路径。
  - 1. 图像文件和HTML文件位于同一文件夹：只需输入图像文件的名称即可，如<img src="logo.gif" />。
  - 1. 图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如<img src="img/img01/logo.gif" />。
  - 1. 图像文件位于HTML文件的上一级文件夹：在文件名之前加入“../” ，如果是上两级，则需要使用 “../../”，以此类推，如<img src="../logo.gif" />。
- 绝对路径
  绝对路径以Web站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的。

查询文档

MDN: https://developer.mozilla.org/zh-CN
W3C : http://www.w3school.com.cn

H5：入门笔记一

浏览器内核

HTML

查询文档

猜你喜欢

热点阅读