web开发学习总结之html

最新推荐文章于 2023-07-05 11:18:20 发布

WangShade

最新推荐文章于 2023-07-05 11:18:20 发布

阅读量324

点赞数

分类专栏： web 文章标签： html web html5

本文链接：https://blog.csdn.net/sinat_25415095/article/details/103356011

版权

web 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

1 背景

从今年5月份开始学习web，断断续续用了差不多半年的业余时间，然后上个月开始着手从零开发自己的个人网站，截至到昨天，实现了一些基本功能，在开发的过程中，发现脑袋里面塞了好多知识点，但是很乱很杂，很多时候要去找个知识点，自己明明知道她就在脑子里，但就是想不起来细节，导致开发这个简单的博客差不多用了一个多月的时间。趁热打铁，从头开始梳理一下知识点，希望能把知识点系统起来。背景介绍完了，下面开始吧。（ps：学习的课程是爱前端邵山欢老师的，他是讲得最好的，没有之一）
html5的部分见这里。

2 基础知识

2.1 上网的过程

上网就是一个请求数据的过程。当我们输入一个网址www.github.com/aaa/1.html的时候，我们的计算机将对远程服务器发出一个HTTP请求。我要请求你的aaa文件夹中的1.html文件。服务器响应了这个请求，将1.html这个网页文件，通过HTTP请求，传输到用户的计算机中。用户的浏览器，对这个文件进行渲染。
上网就是一个请求文件、回馈文件的过程，没有持久连接。

2.2 浏览器

HTTP请求的发起、接收，都是由浏览器来完成的。
浏览器有品牌、版本的差别，需要处理兼容性。
浏览器都有临时文件夹，请求的所有网页文件，都是存放在这个临时文件夹中。所有的网页都是在计算机本地进行渲染的。所以，有些时候，第一次打开网页速度慢，第二次打开网页速度快，这是因为第一次已经把文件传输过来了，以后只要文件没改变就不用传输了。

3 HTML

3.1 什么是HTML

HTML的全称叫做Hypertext Markup Language，超文本标记语言，是网页的一种文件格式。它是负责描述文本语义的语言。
核心是描述语义。
核心是描述语义。
核心是描述语义。
如：

<h1>吃饭睡觉打豆豆</h1>

就是给“吃饭睡觉打豆豆”这些文字增加了“1级标题”的语义。

页面渲染的时候，h1这些标签，是不会显示在页面上的，这就是“超”字的含义：一些文本，就是文本；而一些文本（标签），是描述别的文本语义的文本，不会照搬显示在页面上。这种文件就是超文本文件。
也解释了什么是“标记”，就是一对儿一对儿的标签对儿。

3.2 HTML的基本骨架

<!DTD >
<html>
	<head>	
	
	</head>
	
	<body>
	
	</body>
</html>

3.2.1 文档声明头DTD

所谓的DTD就是DocType Definition 文档类型定义, 也有人翻译为DocType Declartion 文档类型声明
HTML文件的第一行，都是这个DTD，这一行语句的作用就是，告诉浏览器我是什么版本的HTML文件

html5的声明头是最简单的。

<!DOCTYPE html>

其他几种声明头如下。

HTML4.01分三个小版本：
HTML4.01 Strict 严格版：不能使用font、b、u、i等等的废弃标签，不能使用框架集，结构和样式分离。
HTML4.01 Transitional 过渡版（通用版）：可以使用font等废弃标签，不能使用框架集
HTML4.01 Frameset：框架集版：可以使用框架集
XHTML1.0
XHTML1.0严格规定了标签必须是小写，所有的属性都必须用双引号封闭啊，必须有结尾反斜杠等。
同HTML4.01，XHTML1.0也分三个小版本。
XHTML1.0 Strict 严格版：不能使用font等等的废弃标签，不能使用框架集，结构和样式分离
XHTML1.0 Transitional 过渡版（通用版）：可以使用font等废弃标签，不能使用框架集
XHTML1.0 Frameset：框架集版：可以使用框架集

各种DTD细节具体见http://www.w3school.com.cn/tags/tag_doctype.asp

3.2.2 字符集

简体中文可以使用的字符集就两个，分别叫做GBK、UTF-8。
GBK是国标的一个意思，也称为“gb2312”，中国人制定的。
UTF-8是国际的一个字符集标准。
GBK中只有汉字简体（不包括少数民族文字）、绝大部分繁体字、少量片甲名、少量符号。
UTF-8中有世界上所有国家中的所有文字和符号。
html中使用meta标签来设置字符集，表示初始设置。如html5中，设置字符集为UTF-8。

<meta charset="utf-8">

使用哪种呢？建议使用utf-8。

3.2.3 关键字和页面描述

<meta name=”description” content=”页面描述” >

搜索引擎给我们呈现搜索结果的时候，旁边会有一小段描述，这段描述就是上面的标签作用的。

这对标签有助于SEO。如下。
关键字和页面描述

3.2.4 title

描述页面关键词。
title

3.3 HTML页面的特点

对换行、TAB缩进、空格不敏感
空白折叠现象（HTML中的文字，不管有多少个空格，多少个换行，多少个缩进，都会被压缩为一个空格）

4 标签

4.1 容器级、文本级标签

HTML将所有的标签都进行了分类，只有两类：

容器级标签：里面谁都可以装，甚至可以包裹和自己一样的标签。
文本级标签：里面只能放文字、图片、表单元素，和其他的文本级标签。

4.2 h系列

h表示header，标题的意思。一共有六个，有不同的语义。h1~ h6，分别表示1 ~ 6级标题
注意：

一般来说，页面上只能有一个h1标签，其他标签个数不定。实际上这个不是W3C的规则，而是搜索引擎的规则。
h1标签中的内容，权重非常高，搜索引擎会特别注意抓取里面的文字。搜索引擎如果看见页面有多个h1，视为作弊，降低你的权重。
h标签是个文本级标签。

4.3 p-段落

p表示paragraph，段落。
p里面只能放文字、图片、表单元素。不能放其他东西。p是一个文本级标签。

4.4 img-图片

<img src="狗头.jpg" width="500" height="300" alt="加载不出来显示的文字"/>

img属性：

src: src属性中的值是图片的相对路径(相对路径、绝对路径以及node.js中的路径到时会单独写篇文章来讲)
width/height: 设置图片的宽高，若只设置其中一个，将等比例缩放
alt: 加载不出来显示的文字内容

img是自封闭标签。有空白折叠现象。

4.5 a-超级链接

<a href="https://nodejs.org" title="鼠标悬停到标签的提示" target=“_blank”>超级链接-去node.js官网</a>

a属性

href: (hypertext reference超文本地址)，点击需要跳转的网址，可以是绝对路径也可以是相对路径
title: 鼠标悬停时显示的文字
target: 设置是否在新窗口打开链接 _blank在新窗口打开链接 _self在本窗口打开链接

a的锚点用法。

<a name="myHash"></a>

其他链接可快速定位到这个锚点位置。如下。

<a hrft="./a.html#myHash">

4.6 ul-无序列表

<ul>
	<li>首页</li>
	<li>Node.js</li>
	<li>Webgl</li>
	<li>Unity3D</li>
</ul>

ul下只能放li，而li下任何标签都能放，甚至是ul。

4.7 ol-有序列表

<ol>
	<li>html</li>
	<li>css</li>
	<li>javascript</li>
</ol>

ol下也只能放li，而li下任何标签都能放，甚至是ol。

4.8 dl-定义列表

表示定义某事的一个列表。

<dl>
    <dt>HTML语言</dt>
    <dd>HTML语言是基本的描述文字语义的语言，负责页面的结构</dd>
    <dd>一个dt可以有多个dd，也可以一个都没有</dd>
    <dd>一个dt可以有多个dd，也可以一个都没有</dd>
	
    <dt>CSS语言</dt>
    <dd>CSS是负责描述页面样式的语言</dd>
			
    <dt>JavaScript语言</dt>
    <dd>JavaScript是负责描述页面交互的语言</dd>
</dl>

dl: definition list 定义列表
dt: definition title 定义标题
dd: definition description 定义描述

dl中，交替出现dt和dd。dd是dt的解释说明，dd负责解释、描述、定义dt。

4.9 表单

由于做表单多半是使用现成的UI框架(如Bootstrap、element-ui)，原生的这里就不多说啦，简单过一下。

4.9.1 form

<form>	

</form>

4.9.2 单行文本框

<input type="text" value="默认值"/>

自封闭标签。

4.9.3 单选框

<input type="radio" name="sex"/> 男
<input type="radio" name="sex"/> 女

小知识: radio是收音机的意思，按其中的一个键，其他键就弹起来，计算机沿用了这个名字。

4.9.4 复选框

<input type="checkbox" name="hobby" /> 篮球
<input type="checkbox" name="hobby" /> 足球
<input type="checkbox" name="hobby" /> 羽毛球

4.9.5 密码框

<input type=”password” />

4.9.6 三种按钮

<input type="button" value="普通按钮-哈哈" />
<input type="submit" value="提交按钮-嘿嘿" />
<input type="reset" value="复位重置按钮-嘻嘻" />

4.9.7 下拉列表

<select>
	<option>过去</option>
	<option>现在</option>
	<option>未来</option>
</select>

4.9.8 文本域

<textarea cols="40" rows="20">这家伙很懒，什么都没留下</textarea>

4.10 label

可与input配套使用。点击文字也可选中input，提高用户体验。for属性中填input的id。如下。

<input type="radio" name="sex" id="man"/> 
<label for="man">男</label>

4.11 表格

  <table border="1">
      <tr>
          <th>商品名称</th>
          <th>价格</th>
          <th>厂家</th>
      </tr>
      <tr>
          <td>老干妈</td>
          <td>8.5</td>
          <td>贵州老干妈</td>
      </tr>
      <tr>
          <td>山西陈醋</td>
          <td>5.5</td>
          <td>山西醋坊</td>
      </tr>
      <tr>
          <td>酱油</td>
          <td>5.5</td>
          <td rowspan="2">海天</td>
      </tr>
      <tr>
          <td>耗油</td>
          <td>3</td>
      </tr>
  </table>

单元格合并 rowspan—行跨度 colspan—列跨度

4.12 div

div是division分割的意思，在页面上表示容器，将相同语义的一组元素放在同一个div里面。
div是典型的容器级标签，可以包裹任何东西。div+css来进行布局。

4.13 span

span表示跨度，就是文本级的div。就是把一些语义相近、功能相同的文本标签，都包裹在一起。注意，直觉上觉得span比a大，比p小。
span也没有任何的默认样式。span单独使用没有什么意义，都是配合样式表使用的。

4.14 hr

水平线。

<hr />

4.15 br

换行。

<p>
    从前有座山，<br />
    山上有个庙，<br />
    庙里有个小和尚。<br />
</p>

4.15 废弃标签

下面这几个标签由于自身具备很强的样式色彩，而html标签按理说只应该用于描述语义，样式是css的事。所以这些标签在2008年被废弃了，所谓废弃就是我们除了把它们用作钩子外都不再使用它们。
那么什么是“钩子”呢？如图。
什么是钩子

<b></b>
<u></u>
<i></i>
<del></del>

注意: strong em这两个标签虽然也有点样式，但是其自身仍然有语义，所以现在仍在使用。

<p>
	<strong>表示强调，语音阅读的时候会加重声音</strong>
</p>
<p>
	<em>也是表示强调，语音阅读的时候会加重声音</em>
</p>

5 其他

5.1 注释

<!--
	从前有座山，
	山上有个庙。
-->

5.2 字符实体

又叫转义字符。所有转义字符在html中都如下表示。

&字母;

&lt;			< ,  less than小于
&gt;	        > ,  greater than大于
&copy;		© 版权符号
&nbsp;		表示一个中文的空格 non-breaking space（无换行空格）

小结：复习完了，有种豁然开朗的感觉。啊啊啊啊啊，大晚上的，隔壁飘来好香的饭菜香，还让不让人睡觉啦，啊啊啊啊。

WangShade

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web开发学习总结之html

1 背景从今年5月份开始学习web，断断续续用了差不多半年的业余时间，然后上个月开始着手从零开发自己的个人网站，截至到昨天，实现了一些基本功能，在开发的过程中，发现脑袋里面塞了好多知识点，但是很乱很杂，很多时候要去找个知识点，自己明明知道她就在脑子里，但就是想不起来细节，导致开发这个简单的博客差不多用了一个多月的时间。趁热打铁，从头开始梳理一下知识点，希望能把知识点系统起来。背景介绍完了，下...
复制链接

扫一扫