HTML简单入门

最新推荐文章于 2024-05-29 22:01:22 发布

发现世界的真理

最新推荐文章于 2024-05-29 22:01:22 发布

阅读量620

点赞数 1

CC 4.0 BY-SA版权

分类专栏：建站前端快速入门文章标签：前端 html快速入门

本文链接：https://blog.youkuaiyun.com/weixin_39561981/article/details/87623793

建站前端快速入门专栏收录该内容

1 篇文章

订阅专栏

本文介绍了HTML的基本概念，包括网站、网页的本质以及HTML语言。详细讲解了HTML的基本语法、常用标签和重要标签，如标题、图片、超链接、表格等，并通过实例展示了如何使用这些标签创建和编辑网页。此外，还讨论了图片标签的属性、超链接的href和target属性，以及表格的行合并和列合并。

1.什么是网站？

网站：是由若干个网页组成的一个集体，且这些网页之间相互关联。

比如优快云网站，www.youkuaiyun.com 。

其网站首页就是一个网页，点击左侧的"关注"、"专题"等选项，就会关联跳转到不同的页面，

每一个页面都是一个网页，他们相互关联，共同组成了csdn网站。

2.网页的本质

网页的本质是一个文件。

举两个例子：

1. ".txt" 文件，用来记录纯文字的文本文件，通过记事本可以识别及浏览。

2. ".mp3" 文件，用来记录音频的音乐文件，通过音乐播放器可以识别及播放。

同样的，网页 (".html") ,用来记录文字、图片、声音等数据的html文件，通过浏览器可以识别及浏览。

3.HTML语言

HTML：超文本标记语言。

超文本：功能比文本更加强大。

标记语言：用一组标签对内容进行修饰的语言（注意标记语言并不是编程语言）。

4.HTML的基本语法和规范

语法和规范：

HTML文件都是以html或者htm结尾的。一般使用html(可以理解为htm=html，只不过一些老系统不能识别4位文件名)。

HTML文件分为根<html>和头部<head>、体部<body>，头部用来写标题，体部用来写网页的内容。

HTML标签一般都是成对出现，由开始标签和结束标签组成。

HTML标签不区分大小写，统一采用小写。

入门：我的第一个网页文件：

新建一个文本文档，命名为my.html，如下图：

右键通过记事本打开，进行内容的编辑，写好其根、头部和体部，如下图，一个简单的html文件就建好了。

最小化文本，右键my.html文件，选择使用浏览器打开，效果如下图

浏览器成功识别网页文件，没有报错，这里因为我们还没有往网页文件里写内容，所以网页为空白。

5.HTML常用标签

1.网页标题 <title>标题</title> 设置网页头部标题，在HTML文件头部，这里可以自己给网页写一个标题，代码如下：

保存，刷新浏览器网页(F5)，刚才打开的网页文件其网页标题成功设置。

2.设置网页ico图标，ico就是网页标题左侧的图标，可以设置为公司logo，或者个人喜欢的图案，ico图标可以通过http://www.bitbug.net/ 在线生成，将生成的ico图案和网页放在一个目录下比如我这里都放在桌面，

然后在html中加入如下代码：

保存，刷新网页，效果如下：

3.标题标签 <hn></hn>

效果，加粗加黑单独占一行。

n值:1-6逐渐减小，n值超过6不属于标题标签，无任何效果，按照默认文本显示。

编辑my.html内容如下：

保存，打开浏览器，效果如下：

标题标签内容加粗加黑显示，并单独占据一行，期中hn，n值为1-6逐渐减小，n值超过6，为7和8无任何效果，未加粗加黑，也未单独占据一行。

4.段落标签 <p>内容</p>

效果：单独占用一行。

5.文本标签 <font>文本</font>

效果：对文本进行修饰的标签。

6.水平线标签<hr/> (单标签)

效果：网页内容的分割线。

7.其他标签

<br/>换行(单标签)

列表标签：有序ol、无序ul（了解）

对于有序，具有属性type=""，type="1"表示序号按照阿拉伯排列，type="A"表示序号按照英文字母排列。

标签中的常用的通用属性：

align：设置水平对齐的方式，有三个值，left(左)，right(右)，center(居中)。

size：设置内容的大小，

用在font中，值为数字，如size="5",表示字体大小，1-7逐渐增大，最大为7，在大不会增长了。

用在其它标签中值为像素值，如size="5px"。

该设置像素的地方要设置像素，px不能掉，养成好习惯！

注意属性的嵌套：近的有效，如<font size="1">这是一个<font size="4">太阳</font></font>,太阳字体大小为4

face：设置字体，用在font中，如face="宋体"

color：设置颜色，直接用英文名命名如 color="red"，或者直接通过rgb值命名 color="#ffffff"，可参考

http://www.w3school.com.cn/cssref/css_colornames.asp。

width:组件的长，值为像素值，如width="100px"。

height:组件的高，值为像素值，如height="100px"。

扩展：noshade=”noshade” 设置hr标签水平线的纯色。

示例如下：

效果图：

标签属性运用示例，对诗句进行处理

a.对诗名进行加粗处理 <p><b>静夜思</b></p>

b.诗名加下划线，并设置长度值，并向左靠齐 <hr width="200px" align="left">

c.对诗句进行换行处理

<font size="2" face="宋体">窗前明月光</font><br><br>
<font size="2" face="宋体">疑是地上霜</font><br><br>
<font size="2" face="宋体">举头望明月</font><br><br>
<font size="2" face="宋体">低头思故乡</font><br><br>

示例：

效果：

上述基本的标签及属性，自己多加练习熟悉即可。

6.HTML重要标签

1.图片标签 <img />(和前面的hr、br一样，为单标签，带 "/" 自闭合，无需写成成对的形式)

属性：

src:指的是图片显示的路径(位置)，有两种写法，这里方便演示，在D盘建一个my文件夹，建立一个html文件

使用记事本打开，编辑，建立一个img标签，如下图：

(1)绝对路径：相对于计算机磁盘的绝对定位，如C:/1.jpg、D:/image/2.jpg/ 等，带盘符的路径

例如：复制一张图片，命名为1.jpg，复制到D:/my下，

修改my.html内容如下：

保存，通过浏览器打开my.html，效果如下

图片正常显示。

(2)相对路径：相对于当前网页文件的定位，

将图片1.jpg，分别拷贝到D:/my下，D:/my/a/下，D:/下和D:/a/下，如下图：

①同级：对于D:/my/1.jpg与D:/my/my.html,都在D:/my下,属于同一级，直接写文件名称或者./文件名称。

即<img src="1.jpg">。

②向上跳级：对于D:/1.jpg属于D:/下，D:/my/my.html属于D:/my下，D:/my需要向上跳一级定位到D:/,需要用"../"进行跳级，其路径为src="../1.jpg"。同理，对于D:/a/1.jpg,首先D:/my/my.html在D:/my下，需要先向上跳一级，到D:/下，然后在访问D下的a/1.jpg , 即对应的路径为src="../a/1.jpg"。

③向下跳级：写上目录名称/文件名称。如D:/my/a/1.jpg属于D:/my/a下，二my.html位于D:/my下，即对应的路径为src="a/1.jpg"。

width:指定图片的宽度，取值可以是像素值px，也可以是百分比。

height：指定图片的高度，取值可以是像素值px，也可以是百分比。

注：

长和高不设置，则在网页中按照原始比例展示。

只设置一个，比如只设置长，未设置高，则高会自动按照长度的比例进行调整。

如果长高同时设置，图片会按照设置的长和高的值进行缩放(不建议这样设置，图片会拉伸变形)。

alt：当图片无法正常显示(比如路径错误)的时候给出的提示信息。

title：设置鼠标移到图片上显示的文字。

上面html代码中图片未设置长高等属性，显示默认按照原始百分比进行显示，这里做出调整，写个示例

效果如下：只设置了高，图片按照原始进行了缩放，鼠标触碰图片展示对应的标题"我的图片"。

如果需要图片居中显示，只需要用居中标签将图片包起来即可，下列效果可自行测试。

2.超链接标签(重要)

属性：

href:指定跳转的位置

target：指定跳转页面显示的位置(两个基本取值：_self(直接覆盖) 、_blank(新建窗口)，其中_self是默认值)。

扩展：target值也可以改成name，name表示跳转到指定的窗体，有框架集和內嵌框架。

示例：在D:/my/下新建一个1.html如下：

这里未写target属性，则默认值_self跳转的时候对当前页面进行覆盖。

href=""的值为跳转的位置，分两种情况，

1.本地资源，直接使用相对位置或者绝对位置即可(类似图片路径)，这里跳转到同级的my.html

示例：

效果：

点击"点我"，页面跳转到my.html。

2.外链资源：外链资源及互联网上的资源，需要加上http://，例如跳转到百度

示例：

效果：

点击"前往百度"，页面跳转到百度首页。

这两个例子均没有设置target的值，默认为_self覆盖，可以自行设置target="_blank"进行效果测试。

重要扩展点

href=""的值设置为#代表当前页面(也就是自己)，可以在页面顶部设置超链接跳到底部，底部设置超链接跳到顶部

示例：新建一个2.html如下

效果可自行测试。

3.表格标签(非常重要，用来布局的)

<table>

<tr>

</tr>

</table>

table标签用来声明表格，table中，tr用来声明行，td用来声明列(这里列也可以用th来表示,th相比td，内容自动居中，并且加粗显示)，创建表格后马上跟着行和列，养成习惯)。

属性：

边框：border=""

边框颜色：bordercolor=""

表格长：width=""

表格高：height=""

表格背景颜色：bgcolor=""

表格位置：align=""

表格图片背景：background=”背景(图片路径)”

外边距：cellspacing=""

内边距：cellpadding=""

示例一：新建一个html文件，3.html,创建一个简单的表格，长为600px，高为400px，位置居中，边框为1，颜色为红色，表格共有一行两列

效果如下：

示例二：将示例一的表格改成4行，4列。

效果如下：

其他属性及效果，可自行测试。

表格核心操作，跨行跨列操作。

1.行合并 rowspan="数值"

2.列合并 colspan="数值"

注意：行列合并都是在td中的，合并的时候从左到右，从上到下。

示例：进行如下合并。

A. 2行2列和2行3列合并，属于列合并，需要用到colspan,顺序为从左到右，及以2行2列为出发点，往右合一列，在2行2列中加入合并属性，并删去2行3列，代码如下，

合并前

合并后，

效果：

同理，3行1列和4行1列合并，属于行合并，以3行1列为出发点，往下合并一行，在3行1列中加入行合并属性，代码如下

效果如下：

引深：表格还可以分为表格头部thead和表格体部tbody

<table>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

</tbody>

</thead>

th和td都是tr行下的列，一个是居中加粗显示，一个是正常靠左显示

获取表格头 tHead 获取表格体 tBodies[0] 下标表示第几个体

获取体中的某个行 tBodies[0].rows[n]

获取体中所有行 tBodies[0].rows.length

表单标签 -- 用于向服务端提交数据

…post不显示提交的数据信息，get会显示提交的数据信息，不能直接传中文。

</form>

input输入框的属性

type=类型 text文本框 password密码框 hidden隐藏框 radio单选框

checkbox复选框 file文件 reset重置按钮 submit提交按钮 button按钮

input禁用属性disabled=”disabled” //设置禁用后无法往后台传值

placeholder=提示信息 readonly=”readonly”只读 required=”reruired”非空

size=”框体长度” maxlength=”最大输入长度” 设置框体大小用style

注意：submit是提交按钮只用于表单的提交，是button标准按钮的一种，而button不仅可以用于表单的提交，也可以用于非表单的的地方

get提交和post提交的区别

get时候默认的提交方式，除了method指定的post提交其它都是get提交
get提交的参数在请求行里面，会显示在url后面（不安全），post提交的参数在请求体里面（相对安全）
get请求传输量受url长度限制，post没有这个限制
get请求中文乱码解决是 name=new String(name.getBytes(“ISO8859-1”),”UTF-8”);
post请求的中文乱码解决 request.setCharacterEncoding(“UTF-8”);时

文本框标签 -- 输入长文本

注意：文本输入框只能写成成对的形式，不能自闭合<textarea/>

4.下拉菜单

</select> //multiple设置下拉列表可见

注意：单选框，复选框和下拉列表虽然后面有显示的词语，但是不要忘了设置其值和名称

单选框和复选框默认选中为checked=”checked” (或checked=”true”)

而下拉列表默认选中为selected=”selected” (或selected=”true”)

附加：

1.框架集标签：可以分任意页，合起来是百分百，在一个引号内。

</frameset>

超链接a标签中，设置了地址后，根据target属性决定跳转方式，_self默认的覆盖式、_blank新建一个窗口，如果用name名则跳转到相应的窗口！使用了frameset就不用体部了，body不需要写

內嵌框架

属性 frameborder=”1” 0不显示边框 1显示边框

name=”” 框架的名字其它超链接通过target可以跳转到这里面

height，width设置宽高

src设置里面的内容

scrolling="auto" 显示滚动条 auto需要的时候显示 yes任何时候都显示 no不显示

注意需要有内容才能设置出滚动条，没有内容即使是yes也设置不出来

3.不常用标签 <sub>下标</sub> <sup>上标</sup>

总结：

1.创建table时马上跟着行和列，规范性

2.行和列要规矩，该合并的合并，不要随意去掉行列

3.创建的表格刚开始一些格没有填入内容，一些格空闲空间大，别急，在填入东西后慢慢调试，根据自己需要的大小，对表格尺寸和内容尺寸进行调整

4.前期可以设置边框来观察和调试，后期再把边框去掉

5.调试的时候可以使用截图软件来识别大小

6.html是静态页面，结合了script有了动态的效果，其实还是静态页面，只能往后台传数据，但是没法获取从后台来的数据

7.使用script改变的是不是源文件的内容，在网页查看源码内容不变，改变的是内存的值