HTML入门知识汇总

BoYang 发布于2019-04-23 11:42 / 3453人阅读

摘要：认识什么是是描述制作网页的语言，指的是超文本标记语言。中的列表共有种形式无序列表有序列表以及定义列表。无序列表语法成员内容代表整个列表，代表列表中的每个成员。

1. HTML认识

1.1 什么是HTML

HTML是描述（制作）网页的语言，指的是超文本标记语言（Hyper Text Markup Language）。

超文本：就是指页面内可以包含图片、链接、甚至音乐、程序等非文字元素；

标记语言：是一套标记标签（markup tag）；

标记：一种标记符、标记标签，可以告诉浏览器如何显示其中的内容；

1.2 C/S与B/S架构

应用程序一般分为两种架构：

1、C/S架构：Client客户端和Server服务器端架构，比如我们使用的QQ、Foxmail等；

2、B/S架构：B浏览器/S服务器结构，比如我们使用淘宝、京东、百度等；能直接通过浏览器使用的应用都是B/S架构；

C/S架构特点需要用户下载安装软件并更新麻烦，而B/S架构特点是用户电脑上面只需有浏览器就可以使用，所以B/S架构是趋势，我们以后开发的应用也是B/S架构。

总结：B/S架构的软件重要的一块就是使用浏览器，浏览器呈现内容需要HTML，所以我们必须学习HTML；

1.3 动态网页与静态网页

静态网页：html代码和内容书写完毕后，页面的内容和显示效果就基本上不会发生变化了——除非你修改页面代码。

动态网页：页面代码虽然没有变，但是显示的内容却是可以随着时间、环境或者数据库操作的结果而发生改变的。动态网页一般需要与后台程序支撑（jsp,aspx，php）。

注意：动态网页与静态网页的区分不能以页面是否有动态效果，而是内容本身是否是变化显示的。

2.HTML入门

2.1 Eclipse创建html5工程

1.File→New→Other→输入web→选择Static Web Project

此时创建的是一个static静态web项目：

2.在创建好的WebContent目录下新建一个html5格式的.html文件；

3.自定义快速创建一个HTML文件；

在WebContent文件右键弹框中自定义显示HTML创建文件属性的方法：

Window→Perspective→Customize Perspective→Shortcuts→Web→勾选HTML选项；

2.2 在Eclipse中修改文件编码或工程目录编码

涉及到网页的编码显示问题，所以一开始我们就需要考虑工程开发的编码（UTF-8）的形式。在此说明两种设置工程编码的方式：

①设置项目工程目录Workspace下所有工程编码统一为UTF-8；

②设置单个工程文件编码为UTF-8；

在项目工程位置处右键，修改Other中的编码为UTF-8编码；

2.3 HTML的结构

下面是一个H5格式的HTML初始的结构及结构的意义说明：

 1 
 2 
 4 DOCTYPE html>
 5 
 6 <html> 
 7 
 8 <head>
 9 
13 <meta charset="UTF-8">
14 
15 <meta name="keyword" content="java、大数据、golang">
16 
17 <title>Insert title heretitle>
18 head>
19 
20 <body>
21 
22 body>
23 
24 html>

3. HTML标签

HTML里最重要的也是最丰富的元素，就是HTML里面的标签，作为一名web开发者，我们有必要了解并熟练掌握这些HTML里的各个标签元素；下面一一进行分类别讲解。

3.1 特殊符号标签

在网页中比较少见的比如<>与&就属于特殊符号，这部分标签比较特殊，需要多带带拿出来说明一下；

格式	意义
	空格 (小空格)
	空格 (大空格，占一个中文位置)
>	大于 >
<	小于 <
&	&

3.2 基本标签

基本标签是网页元素的主要组成部分，一般构成网页文字及承载内容块的主要载体标签有以下类型的标签元素：

标签	标签说明	闭合属性
i	斜体(强调)	双标签
b	加粗(重要)	双标签
u	下划线	双标签
p	段落(换行，默认情况下和上下的内容之间有间距)	双标签
br	换行	单标签
font	字体(属性：size,color,face)	双标签
h(n)	标题 (h1-h6 从大到小的换行加粗，上下内容之间有距离) 官方：一个网页里面，建议只出现一个h1与h2	双标签
hr	水平线	单标签
pre	预格式文本	双标签
span	行内标签	双标签
div	块标签	双标签

div 、span两个标签没有特殊的功能，只是作为一个内容容器,但使用频率很高，主要与CSS配合使用。

两个都是用于写CSS样式。

主要区别：

div：块标签（它会独占一行）

span：行内标签（它不会独占一行）

直接上代码说明一下：

 1 DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>div与span容器类标签title>
 6 head>
 7 <body>
 8 
 9 <span style="background-color: red;">span标签span>可以继续写东西
10 
11 <div style="background-color: green;">div标签div>这个地方不能写东西了
12 body>
13 html>

显示效果如下：

3.3 重要标签

超链接a标签

a:标签代表超连接，可以使多个页面可以链接起来。

语法：

<a href=”链接跳转地址” target=”何处打开目标”>链接名a>

属性说明：

属性名	属性值	备注
href	链接的目标 URL	打开页面的地址
target	在何处打开目标 URL)	_blank:打开新页面 _self:在本页面打开(默认)

图片img标签

img:标签可以向页面展示一个图片信息。

语法：

<img alt="规定图像的替代文本" src="指定图片来源" width="设置图片的宽度" height="设置图片的高度" title="鼠标移动会显示此title内容">

注意：

img是一个行内标签；支持多种图片格式（jpg，bmp，png，gif）；必须要有src属性；未设置宽高时，默认是等比显示

列表标签ul,ol,dl

列表标签是页面开发中非常常用的一个种标签，一般用于做某项数据的列表或是导航。

HTML中的列表共有3种形式：无序列表、有序列表以及定义列表。

①无序列表ul

语法：

<ul>
    <li>成员内容li>
ul>

ul代表整个列表， li代表列表中的每个成员。

示例代码：


<ul>
<li>本科生招生li>
<li>研究生招生li>
<li>留学生招生
    <ul>
        <li>英国留学区li>
        <li>美国留学区li>
    ul>
li>
<li>本科生就业li>
<li>研究生就业li>
<li>成教/网络/自考li>
ul>

显示效果如下：

②有序列表ol

语法：

<ol>
    <li>成员内容li>
ol>

示例代码：


<ol>
<li>本科生招生li>
<li>研究生招生li>
<li>留学生招生
    <ol>
        <li>英国留学区li>
        <li>美国留学区li>
    ol>
li>
<li>本科生就业li>
<li>研究生就业li>
<li>成教/网络/自考li>
ol>

显示效果如下：

③定义列表dl

语法：

 1 
 7 <dl>
 8     <dt>上层项目dt>
 9     <dd>下层项目dd>
10 dl>

示例代码：

1 <dl>
2     <dt>女装dt>  
3     <dd>连衣裙dd>
4     <dd>牛仔裤dd>
5     
6     <dt>男装dt>
7     <dd>T桖dd>
8     <dd>POLO杉dd>
9 dl>

显示效果如下：

3.4 表格table标签

table标签一般使用来生成表格。

语法：

 1 
 7 <table border="边框" width="宽度" height="高度">
 8     <caption>表格标题caption>
 9     <thead>
10         <tr>
11                 <th>标题th>
12         tr>
13     thead>
14     <tbody>
15         <tr>
16         <td>单元格td>
17     tr>
18     tbody>
19     <tfoot>
20         <tr>
21         <td>结尾td>
22     tr>
23     tfoot>
24 table>

表格行列的合并

跨行与跨列的属性在td标签中：

colspan :合并列；跨列跨n列，就把下面的n-1个td删除

rowspan :合并行；跨行跨n行，在把它下面n-1 个 tr的td删除一个

示例代码：

 1 
 4 <table border="1">
 5     <caption>班级学生信息表caption>
 6     <thead>
 7         <tr>
 8             <th>姓名th>
 9             <th>年龄th>
10             <th>性别th>
11             <th>班级th>
12         tr>
13     thead>
14     <tbody>
15         <tr>
16             <td>张三td>
17             <td>15td>
18             <td>男td>
19             <td rowspan="4">17级2班td>
20         tr>
21         <tr>
22             <td>李四td>
23             <td colspan="2">20td>
24         tr>
25         <tr>
26             <td>王五td>
27             <td>18td>
28             <td>男td>
29         tr>
30         <tr>
31             <td>廖七td>
32             <td>15td>
33             <td>女td>
34         tr>
35     tbody>
36 table>

显示效果如下：

3.5 表单Form标签

表单主要用于收集用户数据，然后提供表单提交数据到后台进行对应的数据参数的处理。

表单Form标签的基本语法（结构组成）：

 1 
 6 <form action="#id" method="get">
 7     
 8     <input type="text" name="username">
 9     
10     <input type="submit" value="提交注册">
11 form>

表单元素类型

input标签中的可选type类型：

类型	名称	特点
text	普通文本框	显示普通文字
password	密码框	内容显示为*号
submit	提交按钮	点击后就提示表单
button	普通按钮	普通按钮，可添加事件方法
reset	重置按钮	回到最初状态(注：不是清空)
radio	单选	一组单选必需name相同
checkbox	多选	一组多选必需name相同
file	附件	可以选择文件进行提交
hidden	隐藏域	不显示控件；做数据修改时会有用
image	图片按钮	必需配合src属性来展示

备注input标签元素属性：

name属性：

注：表示控件的名称，只名称的控件数据才会提交到后台

凡是要提交到后台的控件，都要加上name

用于单选与多选的分组，同一组的元素name需要一致

value属性：

注：有不同的类型(type)中，value的意义是不同的

text/password 如果我们提交写上,它就是默认值(也是我们要提交的值)，提交value的值

submit/button/reset 表示显示在按钮中的文字

radio/checkbox 是一个元素所代表的值

其它属性：

maxlength:一个文本框最多输入多少字符

readonly:只读(不可输入)

disabled：禁用(不可输入) -> 不会提交这个表单元素的数据

checked:仅用于 radio/checkbox作用是默认帮我们进行选择

代码示例：

 1 
 6 <form action="" method="get">
 7 
12     用户名：<input type="text" name="username"><br>
13     密码：<input type="password" name="password"><br>
14     性别：<input type="radio" name="sex" checked="checked">男
15     <input type="radio" name="sex">女<br>
16     爱好：<input type="checkbox" name="hobby">篮球
17         <input type="checkbox" name="hobby">足球
18         <input type="checkbox" name="hobby">舞蹈<br>
19     上传文件：<input type="file" name="image"><br>
20     个人简介：<textarea rows="3" cols="20">textarea><br> 
21     
26     联系地址： <select multiple="multiple" size="2">
27                 <option value="">---请选择---option>
28                 <option value="chengdu" selected="selected">成都option>
29                 <option value="chongqing">重庆option>
30                 <option value="wuhan">武汉option>
31            select><br>
32     
37         <input type="submit" value="提交注册">
38         <input type="reset" value="重置">
39         <input type="button" value="按钮">
40         <input type="image" src="./eategg.gif" alt="图片不存在" value="图片提交">
41 form>

3.6 相对路径说明

以文件本身为参照路径进行定位。

../代表返回当前文件路径的上一级目录；./代表当前页面所在文件夹下的文件路径

服务器托管私有云 html入门 html入门视频 html教程入门 html快速入门

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1039.html

前端资源系列（4）-前端学习资源分享&前端面试资源汇总

摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...

princekin 2019-08-20 11:28 评论0 收藏0
❤ CSDN榜一博主，半年文章汇总【答谢粉丝、文末送书4本】❤

? 作者主页：不吃西红柿 ? 简介：CSDN博客专家?、HDZ核心组成员?、C站周榜第一✌ 欢迎点赞、收藏、评论 ? 粉丝专属福利（包邮送书4本，书单里自己选）：简历模板、PPT模板、学习资料、面试题库。直接去文末领取目录 ? 西红柿-半年文章汇总 ? 【粉丝福利、三连送书】【送书活动介绍】【如何获得】：评论区留言点赞收藏，通过python random函数从评论区抽奖2人...

付永刚 2021-09-23 11:21 评论0 收藏0
DOM结构知识点汇总

摘要：树结构绘制树测试测试郑少女哈哈需要注意的点节点很特殊，和标签之间的不属于的子节点。如果紧跟标签后面的不是上面 DOM树结构绘制DOM树测试 hello, Im come from Mars. by--郑少女哈哈需要注意的点 html节点很特殊，html和head标签之间的text不属于html的子节...

DobbyKim 2019-08-23 12:04 评论0 收藏0
vue基础知识汇总

摘要：类似于页面加载完毕执行的操作，比如默认加载商品列表需特别注意，和遍历是在前，在后。过滤器应用在产品金额前加上符号局部过滤器在实例中创建过滤器名称全局过滤器在实例外建立语法过滤器名称回调参数举例或者写成元方法语法全局方法局部方法 mounted mounted 类似于window.onload 页面加载完毕执行的操作，比如默认加载商品列表 mounted: function () { ...

ky0ncheng 2019-08-22 17:26 评论0 收藏0
前端常见知识点汇总（面试）-HTML和CSS部分

摘要：一内联元素与行元素的区别内联元素即行内元素。绝对定位，相对于定位以外的第一个父元素进行定位，元素脱离文档流。一、内联元素与行元素的区别 1、内联元素即行内元素。2、内联元素，在文档流中挤在一行；不能设置宽高（即，即使设置了也不管用，例如a标签）、margin和padding的top和bottom 块元素，独占一行；可以设置宽高、margin、padding3、可以使用displa...

DevTTL 2019-08-30 15:55 评论0 收藏0