1. 前端基础--html

最新推荐文章于 2024-11-07 10:38:40 发布

喵先生呢

最新推荐文章于 2024-11-07 10:38:40 发布

阅读量361

点赞数 5

分类专栏：前端基础文章标签： html 常用标签

本文链接：https://blog.csdn.net/weixin_45267102/article/details/100855528

版权

前端基础专栏收录该内容

12 篇文章 3 订阅

订阅专栏

Html

1. 什么是Web

web（World Wide Web）即全球广域网，也称为万维网，它是一种基于超文本（超越文本限制，超级链接文本）和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。

什么是网页？

网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。

什么是网站？

网站就是一个一个的网页和其它文件的组成

什么是web前端？什么是后端？

在这里插入图片描述

什么是html?

超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。HTML 不是一种编程语言，而是一种标记语言 (markup language)，是网页制作所必备的。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言(或超文本标签语言)的结构包括“头”部分、和“主体”部分，其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

什么是CSS?

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

什么是JavaScript?☆

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

2. 浏览器

深度阅读：五大主流浏览器内核的源起以及国内各大浏览器内核总结

查看浏览器占有的市场份额网站http://tongji.baidu.com/data/browser

2.1 常见浏览器的内核

浏览器内核英文叫做：Rendering Engine 中文翻译很多，排版引擎、解释引擎、渲染引擎，现在流行称为浏览器内核。负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。

浏览器	内核	备注
IE	Trident	IE、猎豹安全、360极速浏览器、百度浏览器
firefox	Gecko	可惜这几年已经没落了，打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。
Safari	webkit	现在很多人错误地把 webkit 叫做 chrome内核（即使 chrome内核已经是 blink 了）。苹果感觉像被别人抢了媳妇，都哭晕再厕所里面了。
chrome	Chromium/Blink	在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用Blink内核。二次开发
Opera	blink	现在跟随chrome用blink内核。

3. Web标准

Web标准不是某一个标准，而是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C万维网联盟是国际最著名的标准化组织。1994年成立后，至今已发布近百项相关万维网的标准，对万维网发展做出了杰出的贡献。

3.1 Web 标准构成

构成：主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。

标准	说明
结构	结构用于对网页元素进行整理和分类，咱们主要学的是`HTML。`
表现	表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是`CSS`
行为	行为是指网页模型的定义及交互的编写，咱们主要学的是 `Javascript`

4. HTML

4.1 html骨架

在这里插入图片描述

4.2 文档类型

<!DOCTYPE html>

4.3 字符编码

字符编码 Character Encoding : 就是一套自然语言的字符与二进制数之间的对应规则。

计算机中储存的信息都是用二进制数表示的，而我们在屏幕上看到的数字、英文、标点符号、汉字等字符是二进制数转换之后的结果。按照某种规则，将字符存储到计算机中，称为编码。反之，将存储在计算机中的二进制数按照某种规则解析显示出来，称为解码。比如说，按照A规则存储，同样按照A规则解析，那么就能显示正确的文本符号。反之，按照A规则存储，再按照B规则解析，就会导致乱码现象。

4.4 字符集

字符集Charset：是一个系统支持的所有字符的集合，包括各国家文字、标点符号、图形符号、数字等。

计算机要准确的存储和识别各种字符集符号，需要进行字符编码，一套字符集必然至少有一套字符编码。常见字符集有ASCII字符集、GBK字符集、Unicode字符集等。

在这里插入图片描述

4.4.1 ASCII字符集

ASCII（American Standard Code for Information Interchange，美国信息交换标准代码）是基于拉丁字母的一套电脑编码系统，用于显示现代英语，主要包括控制字符（回车键、退格、换行键等）和可显示字符（英文大小写字符、阿拉伯数字和西文符号）。

在这里插入图片描述

基本的ASCII字符集，使用7位（bits）表示一个字符，共128字符。ASCII的扩展字符集使用8位（bits）表示一个字符，共256字符，方便支持欧洲常用字符。

4.4.2 ISO-8859-1字符集

拉丁码表，别名Latin-1，用于显示欧洲使用的语言，包括荷兰、丹麦、德语、意大利语、西班牙语等。ISO-5559-1使用单字节编码，兼容ASCII编码。

4.4.3 GBxxx字符集

GB就是国标的意思，是为了显示中文而设计的一套字符集。

4.4.3.1 GB2312 简体中文码表

一个小于127的字符的意义与原来相同。但两个大于127的字符连在一起时，就表示一个汉字，这样大约可以组合了包含7000多个简体汉字，此外数学符号、罗马希腊的字母、日文的假名们都编进去了，连在ASCII里本来就有的数字、标点、字母都统统重新编了两个字节长的编码，这就是常说的"全角"字符，而原来在127号以下的那些就叫"半角"字符了。

4.4.3.2 GBK：最常用的中文码表

是在GB2312标准基础上的扩展规范，使用了双字节编码方案，共收录了21003个汉字，完全兼容GB2312标准，同时支持繁体汉字以及日韩汉字等。

4.4.3.3 GB18030 最新的中文码表

收录汉字70244个，采用多字节编码，每个字可以由1个、2个或4个字节组成。支持中国国内少数民族的文字，同时支持繁体汉字以及日韩汉字等。

4.4.3 Unicode字符集

Unicode编码系统为表达任意语言的任意字符而设计，是业界的一种标准，也称为统一码、标准万国码。

它最多使用4个字节的数字来表达每个字母、符号，或者文字。有三种编码方案，UTF-8、UTF-16和UTF-32。最为常用的UTF-8编码。

UTF-8编码，可以用来表示Unicode标准中任何字符，它是电子邮件、网页及其他存储或传送文字的应用中，优先采用的编码。互联网工程工作小组（IETF）要求所有互联网协议都必须支持UTF-8编码。所以，我们开发Web应用，也要使用UTF-8编码。它使用一至四个字节为每个字符编码，编码规则：

128个US-ASCII字符，只需一个字节编码。
拉丁文等字符，需要二个字节编码。
大部分常用字（含中文），使用三个字节编码。
其他极少使用的Unicode辅助字符，使用四字节编码。

utf-8 是目前最常用的字符集编码方式，常用的字符集编码方式还有GBK和GB2312

UTF-8: 万国码
GB2312: 只支持简体中文，使用双子节进行编码，共收入6763个汉字和682个非汉字图形字符。
GBK：即对国标编码的扩展，在GB2312的基础上进行扩展形成的，使用双子节编码方式，共收入21003个汉字，从而大大满足了汉字使用的需要。
iSO-8859-1编码是单字节编码，向下兼容ASCII，是许多欧洲国家使用的编码标准。
BIG5: 繁体中文港澳台等用

5. 标签

<!--语言基础-->
<html lang="zh-cn">
<meta charset="UTF-8">  合
   
<!--
字符集(Character set)是多个字符的集
en定义语言为英语
zh-cn定义语言为中文
-->

<!--双标签：-->

title标签: <title>淘宝</title>网页的标题

a标签: <a href="http://www.baidu.com">Text</a>
	  <a href="" target="_blank"> </a>  在另一个页面跳转
	  <a href="" target="_self"> </a>   在本页面跳转

P标签: <p></p>

h1-h6标签:
	  <h1>喵喵</h1> 
     <h6>喵喵</h6> 
     <h7>这个是文本格式</h7>
div标签：
	  <div></div>

font标签：字体  
	  <font></font>  属性有color

textarea文本域
     <textarea >
        文本内容
     </textarea>
cols="每行中的字符数" rows="显示的行数"  我们实际开发不用

strong标签：加粗	老标签 b标签
em标签：倾斜	老标签 i标签
ins标签：下划线	老标签 u标签
del标签：删除	老标签 s标签

<!--单标签-->
hr标签 ：“红头线”  <hr/>
br标签：  换行	  	 <br/>

新标签更加具有语义化的能力

语义化：根据内容的不同，选择使用更加合理的标签的来描述，新标签更有语义

6. 元素的显示模式

6.1 块级元素

比较霸道，自己独占一行
高度，宽度、外边距以及内边距都可以控制。
宽度默认是容器（父级宽度）的100%
是一个容器及盒子，里面可以放行内或者块级元素。
块级元素：div, h1-h6 , hr, p, ul ol ,dl ,li , dt ,dd

6.2 行内元素

相邻行内元素在一行上，一行可以显示多个。
高、宽直接设置是无效的。
默认宽度就是它本身内容的宽度。
行内元素只能容纳文本或则其他行内元素
行内元素：span,b,strong,del,ins,em,u,a。

6.3 行内块级元素

和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。一行可以显示多个
默认宽度就是它本身内容的宽度。
高度，行高、外边距以及内边距都可以控制。

div和span主要提供给css样式使用，div标签和span标签就像一张白纸，可以任意涂抹。

6.4 元素显示模式的相互转换

display: inline/inline-block/block;我们可以通过设置盒子的display样式去让盒子变成任何盒子的展示模式。

inline:让元素变成行内元素
inline-block:让元素变成行内块级元素
block:让元素变成块级元素。

7. 表格

7.1 表格标签

<caption>标题</caption>表格的标题

<table>表格标签，用来管理所有的行和单元格
	<th></th>表头
    <tr>行标签
        <td>单元格
        </td>
    </tr>
</table>

<thead></thead>用于定义表格的头部。用来放标题之类的东西。
<thead> 内部必须拥有 <tr> 标签！
    
<tbody></tbody>用于定义表格的主体。放数据本体 。
    
<tfoot></tfoot>放表格的脚注之类。
<!--以上标签都是放到table标签中。-->

7.2 表格属性

cellspacing: 单元格之间的距离，默认的是 2px
cellpadding:单元格的内边距，默认 1px
width:设置表格的宽度
height:设置表格的高度
align:设置水平偏移 center ,left ,right
border：设置表格的边框

7.3 表格图形的分解

rowspan=“x” x表示跨行数

colspan=“y” y表示跨列数

8. 列表

<ul>无序列表ul标签
    <li></li>
</ul>

<ol>有序列表ol
    <li></li>
</ol>

<dl>
    <dt></dt>
    <dd></dd>
</dl> 
<!--dl里面只能包含dt和dd,dt和dd标签中可以包含其他标签。-->

9. 表单

<form action="">
    
    <!--value 默认显示的文本-->
    <!--type 属性  可以决定了你属于那种input表单-->
    <!--name表单的名字， 这样，后台可以通过这个name属性找到这个表单。  页面中的表单很多，name主要作用就是用于区别不同的表单。-->
    <input type="text" value="单行文本输入框" name="duanduan">
    <input type="password" value="密码输入框">
    <input type="radio" value="单选按钮" checked="checked">
    <input type="checkbox" value="复选框">
    <input type="button" value="普通按钮">
    <input type="submit" value="提交按钮">
    <input type="reset" value="重置按钮">
    <input type="image" value="图像形成按钮">
    <input type="file" value="文件域">
    
    <!--lable标签   用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。-->
    <label> 用户名： <input type="radio" name="usename" value="请输入用户名">   </label>
    
    <textarea name="" id="" cols="每行中的字符数" rows="显示的行数"></textarea>
    
    <!--select下拉列表-->
    <select name="" id="">
        <option value="">A</option>
        <option value="">B</option>
        <option value="">C</option>
        <option value="">D</option>
    </select>

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