万奢网-名品奢网名表回收网 › 首页 ›手表回收云资讯› 手表导购 › 查看内容

HTML基础快速入门

2023-4-14 21:29| 发布者: 夏梦飞雨| 查看: 89| 评论: 0

摘要: 1、HTML简介 HTML : Hpyer Text Mark Language 超文本标记语言超文本（图片、视频、音频、超链接等等....）标记 (特殊的符号)语言 (浏览器能识别的标记) 网页的组成： HTML(结构)+CSS ...

1、HTML简介

HTML : Hpyer Text Mark Language 超文本标记语言

超文本（图片、视频、音频、超链接等等....）
标记 (特殊的符号)
语言 (浏览器能识别的标记)

网页的组成：
HTML(结构)+CSS(样式)+JS(行为)

2、结构标签

<!DOCTYPE html>

<html>

<head>


<meta charset="utf-8">

<title>这是网页标题</title>
</head>

<body>

</body>
</html>

颜色的表示方式：

第一种方式：用表示颜色的英文单词，例，red green blue
第二种方式：用16进制表示颜色，例，#000000 #ffffff #325687 #377405

3、排版标签

可用于实现简单的页面布局
注释标签：
换行标签：< br>
段落标签：< p>文本文字 p>
特点：段与段之间有空行
属性：align对齐方式(left、center、right)
水平线标签:< hr/>
属性:

width：水平线的长度(两种:第一种:像素表示；第二种，百分比表示)
size: 水平线的粗细 (像素表示，例如：10px)
color:水平线的颜色
align:水平线的对齐方式

颜色的表示方式：

第一种方式：用表示颜色的英文单词，例，red green blue
第二种方式：用16进制表示颜色，例，#000000 #ffffff #325687 #37405

4、文字标签

font标签处理网页中文字的显示方式

属性名	代码	描述
size	< font size="7"> font>	用于设置字体的大小，最小1号，最大7号
color	< font color="#f00"> font>	用于设置字体的颜色
face	< font face="宋体"> font>	用于设置字体的样式

5、文本标签

使用标签实现标签的样式处理

标签	代码	描述
b	< b> b>	粗体标签
strong	< strong> strong>	加粗
em	< em> em>	强调字体
i	< i> i>	斜体
u	< u> u>	下划线
sub	< sub> sub>	下标标签
sup	< sup> sup>	上标标签
del	< del> del>	删除线

6、图片标签

在页面指定位置处中引入一幅图片， < img />

属性名	描述
src	引入图片的地址
width	图片的宽度
height	图片的高度
border	图片的边框
align	与图片对齐显示方式
alt	提示信息
title	鼠标移到图片上显示的文字

7、链接标签

在页面中使用链接标签跳转到另一页面
标签： < a href="">< /a>
属性：href:跳转页面的地址(跳转到外网需要添加协议)
设置跳转页面时的页面打开方式，target属性
_blank在新窗口中打开
_self在原空口中打开
指向同一页面中指定位置
定义位置： < a name="名称">< /a>
指向： < a href="#名称">< /a>

8、列表标签

无序列表：使用一组无序的符号定义， < ul>< /ul>

属性值	描述	用法举例
circle	空心圆	< ul type="circle">< /ul>
disc	实心圆	< ul type="disc">< /ul>
square	黑色方块	< ul type="square">< /ul>

有序列表：使用一组有序的符号定义， < ol>< /ol>

属性值	描述	用法举例
1	数字类型	< ul type="1">< /ul>
A	大写字母类型	< ul type="A" >< /ul>
a	小写字母类型	< ul type="a">< /ul>
I	大写古罗马	< ul type="I">< /ul>
i	小写古罗马	< ul type="i">< /ul>

列表嵌套：无序列表与有序列表相互嵌套使用

代码举例：
<ol>
<li></li>
<li></li>
<li>
<ul>
<li></li>
</ul>
</li>
</ol>

9、容器标签

使用CSS+DIV是现下流行的一种布局方式

块级标签 (1、独占一行2、可以设置宽度和高度)
行内标签 (1、宽高取决于内容宽高 2、不可以设置宽度和高度)
行内块标签 (1、宽高取决于内容宽高 2、可以设置宽度和高度)

标签	代码	描述
div	< div> div>	行级块标签，独占一行，换行
span	< span> span>	行内标签，所有内容都在同一行

10、表格标签

标签	代码	描述
table	< table> table>	表格标签
tr	< tr> tr>	表格行标签
td	< td> td>	表格单元格标签
th	< th> th>	标题单元格标签
caption	< caption> caption>	标题标签
thead	< thead> thead>	表格头部标签
tbody	< tbody> tbody>	表格正文标签
tfooter	< tfooter> tfooter>	表格尾部部标签

表格属性	含义
width	表格宽度
height	表格高度
align	对齐方式
border	表格边框
cellspacing	单元格间距
cellpadding	单元格内边距
bgColor	表格背景颜色
rowspan	跨行
colspan	跨列

11 、表单标签

表单标签

标签	代码	描述
form	< form> form>	表单
input	< input>	输入框
select	< select> select>	下拉列表
option	< option> option>	下拉列表项
textarea	< textarea> textarea>	文本域
fieldset	< fieldset> fieldset>	属性集合
legend	< legend> legend>	属性描述

表单属性

属性	含义
action	表单提交的后端程序的地址
method	表单的请求方法(get、post)默认get请求
enctype	表单提交的数据格式 application/x-www-form-urlencoded 将表单的数据以 key=value的形式提交 multipart/form-data 将表单以二进制流的形式提交

type属性值

type属性	含义
text	文本输入框
password	密码输入框
radio	单选框
checkbox	复选框
date	日期选择框
time	时间选择框
datetime-local	日期时间选择框
number	数字输入框
email	邮箱输入框
file	文件上传域
image	图片提交按钮
submit	提交按钮
reset	重置按钮

其他属性

属性	含义
name	表示输入框的名称(未来指的就是提交到后端程序的中的key)
value	表示输入框中的值
checked	表示默认选中(一般用在单选和复选上)
readonly	只读
disabled	不可用
placeholder	输入框提示信息
maxlength	最大输入字符
size	输入框的宽度 (单位：字符)
max	最大值(一般用在数字输入框上)
min	最小值(一般用在数字输入框上)
selected	表示默认选中(一般用在select下拉列表中)
rows	表示文本域的高度(一般用在textarea下拉列表中)
cols	表示文本域的宽度(一般用在textarea下拉列表中)