HTML最佳入门

最新推荐文章于 2024-09-17 09:12:39 发布

路口小沣

最新推荐文章于 2024-09-17 09:12:39 发布

阅读量253

点赞数

分类专栏： web 文章标签： html

本文链接：https://blog.csdn.net/wojiushifeng1992/article/details/89177577

版权

web 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML

1、HTML的概述

1.1、HTML简介

HTML(Hyper Text Markup Language)：超文本标记语言。

文本：记事本 写内容 文本就是用来展示信息

超文本：超出了文本范畴 例如：超链接

语言：沟通交流的工具

标记语言：就是标签语言

>标记就是标签

>HTML不是一种编程语言，而是一种标记语言（因为HTML不需要编译，直接可以被浏览器解析执行）

作用：

*就是用来写网页的

1.2、HTML的书写规范

a).HTML的创建

可以使用文本编辑器来创建，扩展名html或htm

两者没有使用区别

可以被IE（浏览器）解析执行的。

b).HTML的结构

<html>

<head></head>

<body></body>

</html>

c).Html标签的规范

*Html是由一对尖括号包裹着的关键字组成的。例如：<body>

*HTML标签都是预定义

*HTML代码在解析的时候会自动忽略 空格 和 换行

*HTML通常是成对出现的，是由一个开始标签和一个结束标签组成的。例如：<body></body>

特殊情况：

HTML的空标签。例如：<br/>

HTML的空标签就是 没有内容体的 标签

*HTML标签通常是有属性的。属性格式：属性名="属性值" 可以用双引号、单引号或者不加引号。建议使用引号的。 例如：<font color="blue" size='22' face=隶书>真晴朗</font>

*HTML是可以嵌套使用的。（只允许包裹嵌套，不允许交叉嵌套）

*HTML是大小写不敏感的。推荐使用小写

2、HTML的基本标签（链接标签、表格标签）

2.1、文件标签（了解）

<html>标签

相当于JAVA中类的大括号

声明了该文档是一个HTML文档。

包裹了整个HTML 文件

<head>标签

网页的说明信息。
它里面的内容是不会显示。

<title>标签

它是网页的标题

<body>标签

负责显示页面的
它里面的内容是会显示的
会把网页变成文档模式

*属性：

text 设置body标签中正文的颜色

background 设置body背景图片

bgcolor 设置body的背景颜色

扩展：

1、HTML的颜色设置（美工知识，了解）（HTML 红色，绿色，蓝色）

- 颜色关键字 例如：red,blue,pink
- 颜色代码。 例如：#000000。 每一位都是16进制。红色、绿色、蓝色 0~9 A~F
- 三原色。 例如：rgb(0,0,0) 每一位取值0~255 （兼容性不强）

2、绝对路径和相对路径（重要）

绝对路径：文件在硬盘上的具体位置。

相对路径：文件相对于引入者的位置。

/   \\

两种都可以，没有区别

火狐浏览器 默认不支持 绝对路径

2.2、排版标签（了解）

<br/>标签

*就是一个换行

空格占位符

*是一个空格

HTML注释

*格式：<!--注释内容 -->

<p>标签（少）

*就是一个段落标签。段前段后各加一行

*属性：

align 设置段落的对齐方式

<hr/>标签（少）

*就是一条水平线

*属性：

>color 设置水平线的颜色

>size 设置水平线的粗细

>width 设置水平线的长度

扩展：

1、HTML长度设置（美工知识，了解）

像素：width ="6"或者width ="6px" 长度是固定

百分比：width ="80%". 设置相对长度(相对于包裹它的元素) 浏览器改变 长度就改变

2.3、块标签（熟练）

<div>

在文档（浏览器）中设定一个块区域

块级元素（自动换行）

<span>

在行内设定一个块区域

内联元素（不自动换行）

HTML绝大多数都属于块级元素或者内联元素

2.4、字体标签（少）（了解）

<font>标签（少）

*设置字体的大小、颜色、字体类型

*属性：

    color 设置字体颜色

    size 设置字体大小 取值范围 1~7

    face 设置字体类型。

标题标签

*h1~h6

*h1最大，h6最小

斜体、粗体标签

*斜体标签<i></i>

*粗体标签<b></b>

滚动字幕（了解）

(marquee标签)

*只兼容IE，所以不建议使用

2.5、列表标签（熟练）

有序列表(ol标签) （使用较少）

*属性

    type 设置有序列表的项目序号。 A,I,1

    start 设置有序列表的项目序号起始值。

无序列表(ul标签)（常用）

*属性：

	type 设置无序列表的项目标号。

列表项条目（li标签）

2.6、图片标签（熟练）

<img />

*属性：

    src 设置图片引入路径的（常用）

    alt设置替代图片的文字（常用）

    width 设置图片的宽度

    height 设置图片的高度

    border 设置图片的相框宽度

    align 设置图片的对齐方式（不建议使用）

2.7、链接标签（重点）

<a>标签

*属性：

>href 设置链接路径（常用）

访问内网：可以用相对路径和绝对路径

访问外网：需要加上http协议。 例如：[http://www.baidu.com]{.underline}

>name 设置锚点（常用）

配合herf使用

设置锚点，a标签可以没有内容

>target 定位资源打开位置。

一般可以配合框架使用。

例如：<a href="xx.html" target="top">打开</a>

<frame name="top"/>

那么就是在名字为top的框架中打开。

*注：如果要实现跳转链接，那么必须有内容有href属性。例如：<a>内容</a>

2.8、表格标签（重点）

年度财报

部门 第一季度 第二季度 平均

A 100 100 100
B 100 100
总数 400

表格标签

*table,用来定义一个表格

行标签

*tr，用来定义一个表格内的行

单元格标签

*td，用来定义一个单元格。

*th，用来定义一个表头单元格。默认居中加粗

*td及th属性：

>colspan 列合并

>rowspan 行合并

表格标题标签

*caption，用来定义一个表格标题

*必须紧跟在table标签之后

分组标签（了解原理）

*thead 定义表格的页眉（表头）。仅有一个

*tbody 定义表格的主体。一个或多个

*tfoot 定义表格的页脚。仅有一个

针对表格中的行进行分组

如果没有对表格进行分组，那么Firefox火狐浏览器会自动分组，把所有的行都分在tbody

*如果在分组标签外定义了行，那么行默认属于TBODY

*分组标签如果使用必须三个一起使用，否则无效果。

分行下载：

可以控制表格分行下载，从而提高下载速度。

在需要分行下载处加上<tbody>和</tbody>。

公司年度报告

第一季度第二季度平均

100 100 100
100 100
400

3、HTML的表单标签（重点）

作用：表单用来提交用户输入的数据，整个WEB程序的入口

表单浏览器和服务器交互的一个入口

3.1、表单标签

*<form>,就定义了一个表单

*常用属性：

>action 规定当提交表单时，向何处发送表单数据

向内网提交：相对路径和绝对路径

向外网提交：http://www.baidu.com

>method 规定如何发送表单数据

post 和 get

默认是get

*表单提交的数据格式：

参数名=参数值
参数之间用&符号链接

面试题：

表单提交 post和get的区别？

1、get方式提交会把参数显示在地址栏

post方式提交不会把参数显示在地址栏上

2、get方式敏感信息不安全

post方式敏感信息安全

3、get方式提交，官方限制提交大小仅1KB（但多数浏览器可以提交2KB）

post方式提交，提交大数据

3.2、表单的输入项标签

*<input>标签，定义了一个表单的输入项，用来接收用户输入的信息。

*属性：

>type 指定输入项标签的类型，不同类型的输入标签样子不同

文本框 text。输入的文本信息直接显示在框中。

密码框 password。输入的文本以原点或者星号的形式显示。非明文

单选框 radio 如：性别选择。

复选框 checkbox 如：兴趣选择。

提交按钮 submit 用于提交表单中的内容。

重置按钮 reset 将表单中填写的内容设置为初始值

附件框 file 后期扩展内容，会自动生成一个文本框，和一个浏览按钮。例如：照片

隐藏字段 hidden 在页面上不显示，但在提交的时候随其他内容一起提交。例如：用户编号

按钮 button 可以为其自定义事件（JS知识中会讲）。

图片提交按钮 image 是一个图片形式的提交按钮。用来美化提交按钮的。提交表单数据时，会将鼠标点击图片的坐标一起封装。较少使用

>name 用来指定输入项的名称。即表单输入项提交时的参数名称

>value 用来指定输入项的值或用来设置按钮名字。即表单输入项提交时的参数值

>checked 仅用来设置单选框或者多选框的默认勾选。值为checked为默认选中

3.3、选择框标签

*<select>标签，定义了一个选择框标签

*属性：

>name 用来指定选择项的名称。即表单输入项提交时的 参数名称

> multiple 用来设置选择框为多选形式

*<option>标签，定义了一个选择框条目标签

*属性：

>value 用来指定选择项的值。即表单输入项提交时的 参数值

>selected 用来设置选择框的默认选中。值为selected为默认选中

3.4、文本域标签

*<textarea>标签，定义一个文本域输入框

*属性：

>name 用来指定文本域的名称，即参数名

>cols 定义文本域显示几列

>rows 定义文本域显示几行

和<input type=“text”/>区别：

1、文本域可以换行，而文本框不可以

2、文本域的值是写在内容体中包裹着的，文本框的值是在value中

4、HTML的框架标签及特殊符号（了解）

4.1、其他标签

<meta>

*定义了页面信息
*存在于标签中

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

设置HTML文件的编码格式

<meta http-equiv="refresh" content="10; url=http://www.itcast.cn">

能在预定秒数内自动转到指定的网址。 10 表示 10秒。


<link>

*定义了文档和外部资源的关系
*存在于标签中

*格式：

<link rel="stylesheet" type="text/css" href="CSS文件路径"/>

4.2、特殊符号

特殊符号 在HTML中的表示符号 备注

格式：

&特殊符号内容;

4.3、框架标签（了解）

作用：将网页分割成几个部分，在每个部分分别显示不同内容。

<frameset>标签

表示框架标记，用以宣告HTML文件为框架模式，并设定视窗如何分割。

文档模式：body

框架模式：frameset

注：框架标签不可以放到<body>里，一般为了代码的可读性，一般会用<frameset>替代<body>标签。也可以放到<head>和<body>之间。

*常用属性：

>cols 垂直切割。接收整数值或百分比。*代表占用剩余空间

>rows 横向切割。接收整数值或百分比。*代表占用剩余空间

<frame>标签

表示框架页面，用来承载页面，并修改参数属性值
*常用属性：

>src 表示资源的路径

>name 设置框架的名称

例如<frame name="top"/> <a href="xx.html" target="top">top中打开</a>。那么xx.html是在top框架中打开

框架已经逐渐被DIV+CSS形式取代

路口小沣

关注

0
点赞
踩
1

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录