HTML学习总结

qq_54083224

已于 2022-10-10 20:28:03 修改

阅读量199

点赞数

文章标签： html 学习前端

于 2022-10-10 20:27:04 首次发布

本文链接：https://blog.csdn.net/qq_54083224/article/details/127251593

版权

浏览器初识

浏览器内核

浏览器内核又可以分成两部分：

渲染引擎(layout engineer 或者 Rendering Engine)
JS 引擎

常见的浏览器内核可以分四种：Trident、Gecko、Blink、Webkit 。

Chromium/Blink(chrome)

在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。

web标准

Web标准不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合。
主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。

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

HTML初始

HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标签语言”。是用来描述网页的一种语言。

1. HTML标签分类

双标签

<标签名> 内容 </标签名>

单标签

— 单标签也称空标签，是指用一个标签符号即可完整地描述某个功能的标签。

<标签名 />

元素：其实就是标签
html中所有的元素都是固定格式的，使用中根据需求找到对应的元素进行实现，
但是标签的种类分成两种：
1.行内元素 - 不独占一行，不会自动回车（换行），一般不设置宽高
2.块级元素 - 独占一行的，会自动回车（换行），一般设置宽高

经典的使用：
1.行内元素 - span，a，文本标签，.....
2.块级元素 - div，table，p...

注意：块级元素和行内元素可以嵌套的。

2. HTML标签关系

嵌套关系（父子关系）
并列关系

3. 标准文档流

文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。

标准流的微观现象：
    --空白折叠现象。
    --高矮不齐，底边对齐
    --自动换行，一行写不完时，换行写


标准文档流等级
分为两种等级：块级元素和行内元素；
块级元素：
    1).霸占一行，不能与其他任何元素并列
    2).能接受宽、高
    3).如果不设置宽度，那么宽度将默认变为父亲的100%，即和父亲一样宽
行内元素：
    1).与其他元素并排
    2).不能设置宽、高。默认的宽度就是文字的宽度
    
在HTML中，标签分为：文本级和容器级；
文本级：p、span、a、b、i、u、em
容器级：div、h系列、li、dt、dd

标准流里面的限制特别多，标准流做不出网页：因为能并排的不能改宽高。所以，要脱离标准流。
有三种手段可以使一个元素脱离标准文档流，分别为浮动和绝对定位,固定定位。

4. HTML常用标签

4.1 排版标签

标题标签

单词缩写：  head   头部. 标题     title  文档标题
	HTML提供了6个等级的标题  <h1>、<h2>、<h3>、<h4>、<h5>和<h6>
其基本语法格式如下：    
	<hn>   标题文本   </hn>

段落标签

单词缩写：  paragraph  段落
其基本语法格式如下：
        <p>  文本内容  </p>

水平线标签

单词缩写：  horizontal  横线
其基本语法格式如下：
	<hr />是单标签

换行标签

单词缩写：  break   打断 ,换行
其基本语法格式如下：
	<br />

4.2 文本格式化标签

标签	显示效果
`<b></b> <strong></strong>`	文字以粗体方式显示(XHTML 推荐使用strong)
`<i></i> <em></em>`	文字以斜体方式显示(XHTML 推荐使用em)
`<s></s> <del></del>`	文字以加删除线方式显示(XHTML推荐使用del)
`<u></u> <ins></ins>`	文字以加下划线方式显示(XHTML不赞成使用u)

 b  i  s  u   只有使用 没有 强调的意思       strong   em  del   ins  语义更强烈

4.3 图像标签 img

单词缩写：   image  图像
其基本语法格式如下：
	<img src="图像URL" />    //src属性用于指定图像文件的路径和文件名，他是img标签的必需属性。

设置标签属性
其基本语法格式如下：
	<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>

在上面的语法中：
    1.标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。
    2.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
    3.任何标签的属性都有默认值，省略该属性则取默认值。
    采取  键值对 的格式   key="value"  的格式

属性	属性值	描述
`src`	URL	图像的路径
`alt`	文本	图像不能显示时的替换文本
`title`	文本	鼠标悬停时显示的内容
`width`	像素(XHTML不支持%页面百分比)	设置图像的宽度`（在设置图片宽高的时候，建议设置一个属性即可，另一个属性自动适应 - 避免图片的失真）`
`height`	像素(XHTML不支持%页面百分比)	设置图像的高度
`border`	数字	设置图像边框的宽度

4.4. 链接标签

单词缩写：  anchor 的缩写,基本解释锚
其基本语法格式如下：
	<a href="跳转目标" target="目标窗口的弹出方式" title="关键字提示">文本或图像</a>
href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。  
	  Hypertext Reference的缩写。意思是超文本引用
target：用于指定链接页面的打开方式，其取值有self和blank两种，
	-- self为默认值,销毁原网页，在当前网页中打开
	-- blank为在新窗口中打开方式
title: 关键字提示

锚点的使用：
锚点：表示操作页面跳转的目的地，锚点操作属于本地跳转
步骤：
    1.设置一个锚点（使用id属性）
    2.根据设置的锚点找到相应的位置（路径为#+id名，跨页面跳转的时候需要加上页面的路径）

路径

相对路径：
	相对于自己的网页为参考，而建立出的目录路径。
	1.位于同一文件夹，直接输文件名或者 ./+文件名
	2.位于该文件的下一级文件夹，输入文件夹名和文件名，之间用“/”隔开
	3.位于该文件的上一级文件夹，在文件名之前加入“../” ，如果是上两级，则需要使用 “../ ../”，以此类推
	
绝对路径：
	以Web站点根目录为参考基础的目录路径。

4.5. 特殊字符标签

特殊字符	描述	字符代码
	空格符	` `
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
￥	人民币	`¥`
	版权	`©`
	注册商标	`®`
°	摄氏度	`°`
±	正负号	`±`
×	乘号	`×`
÷	除号	`÷`
²	平方2 (上标2)	`²`
³	立方3 (上标3)	`³`

4.6 注释标签

其基本语法格式如下：
	  <!-- 注释语句 -->   ctrl + /       或者 ctrl +shift + / 
注释的两个作用：		
    1.部分代码不让浏览器执行
    2.给程序员友好的提示

4.7. 列表标签

4.7.1 无序列表 ul

无序列表的各个列表项之间没有顺序级别之分，是并列的。
其基本语法格式如下：
    <ul>
      <li>列表项1</li>
      <li>列表项2</li>
      <li>列表项3</li>
      ......
    </ul>

注意：
     1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
     2. <li>与</li>之间相当于一个容器，可以容纳所有元素。
     3. 无序列表会带有自己样式属性，放下那个样式，一会让CSS来！

4.7.2 有序列表 ol

有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义.
有序列表的基本语法格式如下：
    <ol>
      <li>列表项1</li>
      <li>列表项2</li>
      <li>列表项3</li>
      ......
    </ol>

4.7.3 自定义列表

定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。
其基本语法如下：
    <dl>
      <dt>名词1</dt>
      <dd>名词1解释1</dd>
      <dd>名词1解释2</dd>
      ...
      <dt>名词2</dt>
      <dd>名词2解释1</dd>
      <dd>名词2解释2</dd>
      ...
    </dl>

5. 表格 table

5.1 创建表格

创建表格的基本语法格式如下：
    <table>
        <!--caption标签紧随table标签之后(可写可不写),通常这个标题会被居中于表格之上。 -->
        <caption>表格标题</caption>
      <!-- tr 用于定义表格中的一行，必须嵌套在 table标签中，在 table中包含几对 tr，就有几行表格。-->
      <tr>
          <!--td用于定义表格中的单元格，必须嵌套在<tr></tr>标签中，一对 <tr> </tr>中包含几对<td></td>，就表示该行中有多少列（或多少个单元格） -->
        <td>单元格内的文字</td>
        ...
      </tr>
      ...
    </table>

5.2 表格属性

属性名	含义	常用属性值
border	设置表格边框（默认border=“0”）	像素值
cellspacing	设置单元格与单元格边框的空白间距	像素值（默认为2像素）
cellpadding	设置单元格内容与单元格边框之间的空白间距	像素值（默认为1px）
width	设置表格的宽度	像素值
height	设置表格的高度	像素值
align	设置表格在网页中的水平对齐方式	left、center、right

5.3 表头标签

表头一般位于表格的第一行或第一列，其文本加粗居中
设置表头非常简单，只需用表头标签<th></th>替代相应的单元格标签<td></td>即可。

5.4 合并单元格

跨行合并：rowspan   
跨列合并：colspan

6. 表单

在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。
    -- 表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
    -- 提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
    -- 表单域：他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地	               址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

6.1 表单域

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

创建表单的基本语法格式如下：
    <form action="url地址" method="提交方式" name="表单名称">
      各种表单控件
    </form>

常用属性	说明
action	用于指定接收并处理表单数据的服务器程序的url地址。
method	用于设置表单数据的提交方式，其取值为get或post
name	用于指定表单的名称，以区分同一个页面中的多个表单。

6.2 input控件

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

属性	属性值	描述
type	text	单行文本输入框
type	password	密码输入框
type	radio	单选按钮
type	checkbox	复选框
type	button	普通按钮
type	submit	提交按钮
type	reset	重置按钮（只在form表单有用）
type	image	图像形式的提交按钮
type	file	文件域
type	hidden	定义隐藏的输入字段

name	由用户自定义	控件的名称
value	由用户自定义	input控件中的默认文本值
size	正整数	input控件在页面中的显示高度
checked	checked	定义选择空间默认被选中的项
maxlength	正整数	控件允许输入的最多字符数

6.3 textarea控件(文字域)

textarea控件可以轻松地创建多行文本输入框

其基本语法格式如下：	
    <textarea cols="每行中的字符数" rows="显示的行数">
      文本内容
    </textarea>

6.4 select控件（下拉菜单）

基本语法格式如下：
    <select name="select" multiple="multiple" size="6">
            <option value="wx" selected="selected">无锡</option>
            <option value="wz" selected="selected">苏州</option>
            <option value="sh" selected="selected">上海</option>
            <option value="ks" selected="selected">昆山</option>
    </select>
<!--
	1. <select></select>中至少应包含一对<option></option>。
    2. 在option 中定义selected =" selected "时，当前项即为默认选中项。
-->

qq_54083224

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

特殊字符	描述	字符代码
	空格符	` `
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
￥	人民币	`¥`
	版权	`©`
	注册商标	`®`
°	摄氏度	`°`
±	正负号	`±`
×	乘号	`×`
÷	除号	`÷`
²	平方2 (上标2)	`²`
³	立方3 (上标3)	`³`

特殊字符	描述	字符代码
	空格符	` `
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
￥	人民币	`¥`
	版权	`©`
	注册商标	`®`
°	摄氏度	`°`
±	正负号	`±`
×	乘号	`×`
÷	除号	`÷`
²	平方2 (上标2)	`²`
³	立方3 (上标3)	`³`

特殊字符	描述	字符代码
	空格符	` `
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
￥	人民币	`¥`
	版权	`©`
	注册商标	`®`
°	摄氏度	`°`
±	正负号	`±`
×	乘号	`×`
÷	除号	`÷`
²	平方2 (上标2)	`²`
³	立方3 (上标3)	`³`