1.网页的概念

网页的来源

网页的本质类似于txt文档一样,我们可以给这里面放入文字、图片和链接等元素。

HTML笔记-基础篇-html入门_h5

如果没有浏览器那么我们在文档中写什么内容就会看到什么内容,和txt文档一样,但是如果通过浏览器打开以后它就是网页了

HTML笔记-基础篇-html入门_html_02

可以看到浏览器中展示的文档内容和普通的文档打开并不一样,这是因为浏览器会解析文档中的内容,对这些内容进行渲染

因此网页就相当于是浏览器解析文档后显示出来的内容

浏览器

既然是对文档结构进行解析,那么解析方法就会有多种,解析的方式不同,展示的内容也会有所差别,这样就形成了同一份文档被解析为多种风格。

浏览器中主要是依靠内核对文档进行解析,根据内核的不同浏览器主要分为以下种类:IE、chrome、oprea、firefox、safari

剩余的其他浏览器如uc、qq等基本都是基于这些内核定制出来的

web标准

因为存在多种浏览器对同一份文档解析后出现不同的内容,对开发造成了很大的困扰,因此出现了W3C标准化组织,他们负责制定标准,然后各种浏览器实现这些标准,这样开发者只需要掌握这些标准即可适配所有浏览器了

其中标准主要由html、css和javascript三部分组成

2.网页的编写方式

固定格式

如果直接在文档中写入内容,浏览器也是可以直接解析的,这是因为浏览器会自动为这些内容添加固定格式




<meta charset="UTF-8">
<title>Document</title>






整个网页由html标签开头和结尾,分为head和body两部分,通过声明这是html5页面,head标签内指明页面的一些元信息,body中就是在浏览器中展示的内容

html中标签分为两种:双标签和单标签,双标签如,中间可以插入其他内容,单标签的中间则不允许再插入其他内容,比如


标签之间的关系也分为两种:并列和包含

包含:


<meta charset="UTF-8">
<title>Document</title>


并列:

<meta charset="UTF-8">
<title>Document</title>


一般一个网页由html或htm结尾

常用的一些标签

h系列标签


<h1>h1标签</h1>
<h2>h2标签</h2>
<h3>h3标签</h3>
<h4>h4标签</h4>
<h5>h5标签</h5>
<h6>h6标签</h6>


HTML笔记-基础篇-html入门_html_03

h标签一般用于标题,字体大小逐级递减,每个h标签都会独占浏览器一行

段落p标签


<p>段落1</p><p>段落2</p>
<p>段落3</p><p>段落4</p>


HTML笔记-基础篇-html入门_html_04

p标签用于分割每段话,使页面结构更加美观,每个p标签也会独占一行,并不会按照文档中写的样子展示

换行br标签


<p><br>落3</p><p>段落4</p>


HTML笔记-基础篇-html入门_h5_05

br标签会强制将内容进行换行显示

文本格式化标签


<strong>加粗</strong>
<em>倾斜</em>
<del>删除线</del>
<ins>下划线</ins>


HTML笔记-基础篇-html入门_css_06

格式化标签并不会导致换行

盒子标签


<div>div标签1</div><div>div标签2</div>
<span>span标签1</span><span>span标签2</span>


HTML笔记-基础篇-html入门_html_07

div和span标签的作用是为样式服务的,最明显的特点就是div是独占一行,span并不会

图像img标签


网络路径:<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">
当前文件所在目录下:<img src="bd.png">
其他目录下:<img src="otherdir/bd.png">


HTML笔记-基础篇-html入门_表单_08

img标签不会独占一行,src中可以填入网络路径,也可以直接使用项目中的图片

其中图片的路径分为相对路径和绝对路径,相对指的是相对于当前文件所在路径,绝对路径则是从项目根目录开始计算

超链接a标签

<a href="https://www.baidu.com">百度一下</a>


HTML笔记-基础篇-html入门_h5_09

点击以后跳转到百度页面,herf除了可以指定网络地址外,还可以指定页面中的某个锚点,或者是某个页面,它的作用就是在当前窗口中打开href指定的内容

表格table标签


<table>
<thead>
<tr><th>tilte1</th>
<th>title2</th>
</tr></thead>
<tbody>
<tr><td>content1</td>
<td>content2</td>
</tr></tbody>
</table>


HTML笔记-基础篇-html入门_html_10

table标签也独占一行,目前展示的都是标签的默认样式,具体美化方式需通过css操作,单元格中可以放其他的标签

列表ul、ol、dl标签


无序列表:
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
<li>list4</li>
</ul>
有序列表:
<ol>
11
<li>order list1</li>
<li>order list2</li>
<li>order list3</li>
<li>order list4</li>
</ol>
自定义列表:
<dl>
<dt>tilte</dt>
<dd>define list1</dd>
<dd>define list2</dd>
<dd>define list3</dd>
<dd>define list4</dd>
</dl>


HTML笔记-基础篇-html入门_3c_11

表单form标签

表单中主要分为input、select、textarea三个标签


<form>
input系列:<br>
普通输入框:<input type="text"><br>
单选框:<input type="radio"><input type="radio"><br>
多选框:<input type="checkbox">爱好1<input type="checkbox">爱好2<br>
提交按钮:<input type="submit"><br>
重置按钮: <input type="reset"><br>
select系列:<br>
下拉框: <select><option>选项1</option><option>选项2</option></select><br>
textarea系列:<br>
文本框: <textarea></textarea>
</form>


HTML笔记-基础篇-html入门_表单_12

input系列中还有许多其他类型的标签,用法基本是一样的

3.总结

页面中的标签基本种类并不多,但是可以很好的满足日常需求,就是这些标签组成了丰富多彩的网页,这些标签的默认样式有时并不能满足人们对界面美感的追求,因此需要通过css对这些标签进行重新布局,定位等等

如果记不住这么多的标签,那么只需要掌握div一个标签即可,因为通过css可以将div模拟成其他的任何标签