Html简单介绍

最新推荐文章于 2022-11-22 13:14:56 发布

frazx

最新推荐文章于 2022-11-22 13:14:56 发布

阅读量251

点赞数

文章标签： html html简单介绍

本文链接：https://blog.csdn.net/frazx/article/details/80817111

版权

html简介：

1.html是什么：

1. Html是用来描述网页的一种语言。

(1)HTML指的是超文本标记语言（Hyper Text Markup Language）

(2)HTML不是一种编程语言，而是一种标记语言（markup language,标记语言是一套标记标签(markup tag)）

（3）HTML使用的是标记标签来描述网页的。

超文本标记语言：

语言：人与计算机交互的工具

超文本：（1）普通文本不能实现的，超文本可以实现，能实现普通文本不能实现的功能

（2）包括超链接的文本

标记：就是标签，不同的标签能实现不同的功能

2.html能做什么：html通过标签的形式将信息展示给用户

3.html书写规范

(1)html结构

<html>

<head>

包括资讯信息：整个页面的属性、指导浏览器解析的标签、引入外部文件的标签

</head>

<body>
我们需要展示的信息

</body>

</html>

(2)html标签是以尖括号包裹关键字成对出现的，有开始标签和结束标签，支持正确的嵌套

（3）大部分标签有属性格式：属性=“属性值”（多个属性之间用空格隔开）

（4）空标签：功能比较单一，例如：<br></br>======<br/>换行标签

（5）html不区分大小写，建议使用小写。

二、html基本标签

1、文件标签（结构标签）

<html><html>:根标签
<head>
<title></title>:页面的标题
</head>
<body></body>：内容

属性： text ：文本的颜色

bgcolor:背景色

background:背景图片

颜色的三种表示方式：

（1）单词：red green black

(2)rgb三原色：reg(0,0,0) 0-255

(3)#000000 #ffffff

2、排版标签

（1）注释标签：<！-- 注释-->

（2）换行标签：<br/>

(3)段落标签：<p>文本文字</p>

特点：段与段之间有空行

属性：align:对齐方式（有三个属性：left,center,right）

(4)水平线标签：<hr/>

属性：width:长度

size:粗度

color：颜色

align:对齐方式

尺寸的写法：

（1）像素：10px

(2)百分比：占据副标签的百分比，会随着副标签的大小进行变化

（3）块标签

<div></div>:行级块标签

<span></span>:行内块标签

作用：（1）<div></div>:div+css布局

（2）<span></span>:进行友好提示

4、文字标签

基本文字标签：<font></font>

属性：color：颜色

size：大小（最大值是7，最小值是1，默认值是3）

face:字体类型，即字体，直接写文字就可以

标题标签：<h1></h1>-<h6></h6>

随着数字的增大逐渐变小，字体是加粗的，内置字号默认占据一行

5、清单标签（也称列表标签）

无序列表：<ul></ul>

<li></li>:列表项

属性：

type:有三个值，分别是disc、square和circle

示例：<ul>

</ul>

有序列表：<ol></ol>

<li></li>:列表项

属性：

type：1、A、a、I、i（数字、字母、罗马数字）

start：数字，代表首项开始位置

示例：

<ol>

</ol>

列表标签的作用：实现菜单项（实现横向或者纵向菜单）

无序列表标签怎么去掉小圆的？HTML中不能直接去掉，没有这个属性，需要在css中给li标签添加样式list-style:none;

6、图形标签：<img/>(自关闭标签)

属性：

src:图形地址

width：宽度

height：高度

border：边框

align:对齐方式，代表图片与相邻的文本的相对位置（有三个属性值：top middle bottom）

alt:图片的文字说明

7、链接标签：<a></a>

属性：href:跳转页面地址

name:名称，锚点

target：_self(自己) _blank(新页面，之前的页面还有)，默认是_self

作用：（1）页面跳转，注意：要跳到外网必须要加协议

（2）访问锚点；回到锚点（顶部、底部、中间），在访问锚点时的书写格式：#name的值

8、表格标签

属性：border：表格边框

width：表格的宽度

align:表格的对齐方式（<tr align="center">单元格里面的内容居中对齐</tr>）

bgcolor:背景颜色

<tr></tr>:代表行

<td></td>:代表单元格

属性：colspan:列合并

rowspan:行合并

<th></th>:相等于<td>,只是内置样式加粗居中

<caption></caption>:表格的标题，即表头

表格的作用：

（1）简单的实现一个表格样式

（2）进行页面布局

示例：

<table>

<td>普通单元格</td>

</tr>

</table>

作用：分块加载，用户体验比较好

三、html表单标签（重点）

1、form标签：<form></form>

属性：

name:表单名称

action：提交的路径地址

method：提交方式（get和post提交）

get和post的区别（重点）：（1）get提交将数据加在地址栏的后面，格式？name=value&name=value;post提交将数据封装在请求体中?username=zhangsan&password=123&sex=male&hobby=football&hobby=paiqiu&city=bj#

（2）get提交相对不安全；post提交相对安全

（3）get提交有大小限制，根据浏览器的不同而不同；post不限制大小

示例：<form>

<table>

<!---form里面嵌套table->

</table>

</form>

2.input标签：<input type=""/>

type属性：根据type属性实现各种不同功能的表单项

text：普通的文本输入框；

name:username value="张三"

password：密码输入框；特点是显示的是掩码

radio：单选按钮

name:如果想让一组单选按钮互斥，就要指定同一name属性值，需要加value属性值；

checked：默认被选中

checkbox:复选框；

name:组的概念，需要加value属性值。

checked:默认被选中

file:上传文件的控件

button：普通按钮，没有任何内置的功能；

submit:内置功能，点击会按照action地址提交

reset：重置，点击会清空之前填写的内容

image：图片按钮，功能类似与submit

src:加载图片

alt:图片的提示文字

hidden：隐藏表单，作用是在提交数据的时候，服务器需要这个数据，但是不需要用户看到

注意：name属性必须要写

3、select标签（<select></select>）:下拉菜单

属性：name：表单项的名称

option标签：可选项（下拉菜单之间的级联）

属性：value:表单项的值

selected：默认被选中

4、textarea:文本域标签

属性：cols：列数

rows:行数

注意：默认的文本值在标签体当中

四、html框架标签及其他

1、框架标签

frameset:

属性：rows:按行划分

cols:按列划分

划分格式：rows=“120，*”

frame:

属性：

name:名称，方便target根据name值进行定位

src:加载的页面地址

2、其他标签

<meta>

<link>

href:引入css文件的地址

src:js的文件地址

3、特殊字符

&nbsp:空格

&gt:大于号

&lt:小于号

&copy：版权符号

&reg:注册符号

frazx

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫