HTML学习

最新推荐文章于 2023-03-02 20:40:05 发布

strong_yu

最新推荐文章于 2023-03-02 20:40:05 发布

阅读量1.2k

点赞数

分类专栏： html+css+js

本文链接：https://blog.csdn.net/strong_yu/article/details/51836710

版权

html+css+js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

html主要学习四个方面的内容：

第一：html的基本概念，它能做什么

第二：html的基本标签

第三：html中的表单标签

第四：html中的框架标签和其它标签

一.HTMl的基本概念

1.HTML是什么

a.html是超文本标记语言,不同于普通的文本语言,它可以实现普通文本语言不能实现的功能

b.html不是编程语言,只是一种标记语言

c.标记语言是由一套标记标签组成来实现网页

2.html能做什么

html就文档等同于网页，html就是通过标签和纯文本来描述一个网页,所以Html其实就是一个网页。

3.怎么编写html

a.html有三层结构

最外层的主结构位html标签,包裹head和body标签

<html>(根标签)

<head>

head标签中是头标签，显示网页的标题，整个网页的属性信息，引入外部文件(比如css,js文件等)

</head>

<body>

body标签是显示给我们内容的标签

</body>

</html>

b.html标签的书写方式

(1)html标签是以尖括号包裹一个英文单词成对出现的,又开始标签，有结束标签(</单词>表示结束标签)，支持标签之间的正确嵌套。

格式：

<标签名属性内容> 包裹的内容 </标签名>

(2)html标签不区分大小写,默认小写

(3)很多标签都有属性,属性是以键值对的方式出现的，多个属性之间以空格隔开，例：属性=”值“，属性都是写在开始标签中；

(4)有些标签没有结束标签，因为它不需要包裹内容，所以是自闭合的，例<br/>:换行标签，注意它的/在后面，结束标签的/.在前面

(5)HTML中不支持 : 空格回车制表符.都会被解析成一个空白字符

<html>
<head>
</head>
<body>
你好<br/>
html
</body>
</html>

4.html的元素

html元素表示从开始标签到结束标签的所有代码

二.Html的基本标签

1.文档标签/结构<html>

<html>
<head>
<title>第一个html页面</title>
</head>
<body>
</body>
</html>

<title>定义该页面的标题,显示在浏览器的顶端

文档标签有很多的属性，可以改变显示的样式，如果文档标签中嵌套了其它标签，都设置了同样的属性，那么以嵌套标签的属性为准

2.排版标签

a.注释标签

b.段落标签

段落之间会留一空行

属性:align(对其方式) 值：right，left，center，justify

c.换行标签

<br/>

d.水平线标签

<hr/> 属性:width---长度 size-----高度

尺寸:%表示占屏幕的比例，根据父屏幕的伸缩而伸缩 px:固定的大小，不会根据父屏幕的伸缩而伸缩

<html>
<head>
<title>第一个html页面</title>
</head>
<body>
<!-- 注释标签 -->
春晓<br/>
作者：孟浩然<br/>
<hr width="40%" size="5px" color="green"/>
<p align="center">
春眠不觉晓，处处闻啼鸟。<br/>
夜来风雨声，花落知多少
<p/>
</body>
</html>

3.块标签

div:行级块标签有换行功能

span:行内块标签

<html>
<head>
<title>第一个html页面</title>
</head>
<body>
<div>你好</div>
<div>helloworld</div>
<span>你好</span>
<span>helloword</span>
</body>
</html>

4.字体标签

a.font

属性：颜色 (color) 字体 (face) 大小(size)：1-7 默认值:3

b.<h1>----<h6>标题标签

字体依次减小，默认加粗

<html>
<head>
<title>第一个html页面</title>
</head>
<body>
<h1>helloword</h1>
<h2><font color="red">helloword</font></h2>
<h3>helloword</h3>
<h4>helloword</h4>
<h5>helloword</h5>
<h6>helloword</h6>
</body>
</html>

5.清单标签(列表标签)

a.有序和无序清单

ol(有序清单):清单以字母或者数字的顺序排列 type属性:以哪种类型(字母或者数字)排列 start:排列的开始位置

uk(无序清单):清单以圆点,方框排列 type:以哪种类型的方式排列

li(列表的每一项):定义列表中的每一项

<html>
<head>
<title>第一个html页面</title>
</head>
<body>
<ol type="1" start="1">
<li>html</li>
<li>html</li>
<li>html</li>
</ol>
<ul type="circle">
<li>html</li>
<li>html</li>
<li>html</li>
</ul>
</body>
</html>

b.自定义列表项

自定义列表项是项目与注释的结合，即每个项后都跟一注释

<dl>:自定义列表项

<dt>:自定义列表项每一列的开始

<dd>自定义列表项每一列的定义的开始，即注释的开始

<html>
<head>
<title>第一个html页面</title>
</head>
<body>
<dl >
<dt>html1</dt>
<dd>这是自定义列表的第一项</dd>
<dt>html2</dt>
<dd>这是自定义列表的第二项</dd>
</ol>
</body>
</html>

6.图形标签

<img/>标签

src属性:显示图片的地址

alt属性:图片加载不成功时，替代图片的文本

<html>
<head>
<title>第一个html页面</title>
</head>
<body>
<img alt="一个美女图片" src="../Images/1.jpg"  width="25%" height="25%"/>
</body>
</html>

7.链接标签

<a></a>

两个作用：

第一个超链接：通过创建href属性，创建指向另一个文档的连接

第二个创建锚点;通过创建name属性，使其回到顶端等

target属性： _self 在自身页打开 _blank：在空白页打开

超链接:

<html>
<head>
<title>第一个html页面</title>
</head>
<body>
<a href="http://www.baidu.com" target="_blank">百度链接</a>
</body>
</html>

锚标签；

name：该属性定义锚

href:链接到锚，注意前民有#，表示当前页面

<html>
<head>
<title>第一个html页面</title>
</head>
<body>
<a name="top"></a>
html<br/>
<!-- 很多行前面的内容 -->
<a href="#top">回到顶端</a>
</body>
</html>

8.表格标签

table:定义表格标签

tr:定义表格的一行标签

td:定义表格的单元格

<html>
<head>
<title>第一个html页面</title>
</head>
<body>
<table border="2" width=50%>
<tr align="center">
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr align="center">
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
</body>
</html>

caption：定义表格的标题

td标签中的colspan属性和rowspan属性

colspan:列占的单元格数 rowspan:行占的单元格数

<html>
<head>
<title>第一个html页面</title>
</head>
<body>
<table border="2" width=50%>
<caption>
表格标签
</caption>
<tr align="center">
<td>第一行第一列</td>
<td>第一行第二列</td>
<td>第一行第三列</td>
</tr>
<tr align="center">
<td colspan=2>第二行第一列</td>
<td rowspan=2>第二行第三列</td>
</tr>
<tr align="center">
<td>第三行第一列</td>
<td>第三行第二列</td>
</tr>
</table>
</body>
</html>

三.html的表单标签

1.<form> </form>标签

表单标签就是form中添加一些表单元素实现

name属性：规定表单的名字

action属性:规定提交表单时，把数据发向的地址

method属性：提交方式，默认get提交

get提交：提交加在地址栏的后面，格式?name=value&name=value ,get提交相对不安全，get提交有大小限制(1K)

post提交:提交放在请求体中 post提交相对安全大小没有限制