Java学习（前端HTML）

最新推荐文章于 2021-11-27 14:09:35 发布

雨天娃娃丶

最新推荐文章于 2021-11-27 14:09:35 发布

阅读量155

点赞数

文章标签： html

本文链接：https://blog.csdn.net/qq_37830085/article/details/108580235

版权

HTML简介

HTML是什么？

HTML 是 HyperText Mark-up Language 的⾸字⺟简写，意思是超⽂本标记语⾔

HTML不是⼀种编程语⾔，⽽是⼀种标记语⾔

超⽂本指的是超链接，标记指的是标签，是⼀种⽤来制作⽹⻚的语⾔，这种语⾔由⼀个个的标签组

成

⽤这种语⾔制作的⽂件保存的是⼀个⽂本⽂件，⽂件的扩展名为 .html 或者 .htm

html⽂档也叫 Web⻚⾯，其实就是⼀个⽹⻚，html⽂件⽤编辑器打开显示的是⽂本，可以⽤⽂本

的⽅式编辑它

如果⽤浏览器打开，浏览器会按照标签描述内容将⽂件渲染成⽹⻚，显示的⽹⻚可以从⼀个⽹⻚

链接跳转到另外⼀个⽹⻚

HTML文档类型的设定：

HTML在不同版本下⽂档类型的设定，即 <!Doctype > 对应的属性值。

HTML基础语法

HTML基本结构：

HTML⽂件的扩展名为 .html 或者 .htm

HTML⽂本的结构包括“头”部分（head）、和“主体”部分（body），其中“头”部提供关于⽹⻚的信

息，“主体”部分提供⽹⻚的具体内容

HTML是由：标签和内容构成, 每个HTML⻚⾯都有两部分构成(head头和body体)，其最外层

是 <html>...</html> 标签包裹

HTML标签（标记）的语法是由 < 和 > 括起来。

HTML标签有两种：双标签： <标签名>....</标签名> 和单标签： <标签名 />

HTML标签中还可以添加属性： <标签名属性名1=“值1” 属性名2=“值2” 属性名n=“值n”>....</

标签名>

HTML标签规范：标签名⼩写、属性使⽤双引号、标签要闭合。规范不遵守浏览器不会报错，会尽

量解析，⼤不了不显示效果 ^_^ 。

实例：

<!DOCTYPE html>

<head>

</head>

<body>

⽹⻚显示内容

</body>

</html>

HTML注释：

html⽂档代码中可以插⼊注释，注释是对代码的说明和解释

格式：

HTML中HEAD头部设置

head标签作⽤于⽹⻚的头部，它的内容不会在正⽂中显示出来，主要完成对当前⻚⾯的各种设置

在head中常包含如下⼦标签：

<base> 定义了⻚⾯链接标签的默认链接地址 <base href="http://www.****.com/"target="_blank">

实例：

<!DOCTYPE html>

<head>

嵌⼊css样式代码

</style>

JavaScript脚本程序

</script>

</head>

<body>

</body>

</html>

HTML文本标签

常用文本标签

<hn>...</hn> 其中n为1--6的值。标题标签（加粗、独⽴⾏）

<i>...</i> 斜体

<em>...</em> 强调斜体

<b>...</b> 加粗

<strong>...</strong> 强调加粗

<cite></cite> 作品的标题（引⽤）

<sub>...</sub> 下标 <sup>...</sup> 上标

<del>...</del> 删除线

强调是相对于搜索引擎而言，在搜索的过程中，如果有强调的文本出现，就优先对强调的文本加以收录。（强调用于搜索优化）

实例：

<!DOCTYPE html>

<title>⽂本标题示例</title>

</head> <body>

<h3>HTML标签实例--⽂本标签</h3>

<em>em: 强调斜体标签</em> <br/>

<strong>strong: 强调加粗标签</strong><br/>

⽔分⼦：H<sub>2</sub>O <br/>

4<sup>2</sup>=16

</body>

</html>

HTML格式化标签：

常见的格式化标签：

<br/> 换⾏

<p>...</p> 换段

<hr /> ⽔平分割线

列表：

<ul>...</ul> ⽆序列表

<ol>...</ol> 有序列表其中type类型值：A a I i 1 start属性表示起始值

<li>...</li> 列表项

<dl>...</dl> ⾃定义列表

<dt>...</dt> ⾃定义列表头

<dd>...</dd> ⾃定义列表内容

<div>...</div> 常⽤于组合块级元素，以便通过 CSS 来对这些元素进⾏格式化

<span>...</span> 常⽤于包含的⽂本，您可以使⽤ CSS 对它定义样式，或者使⽤ JavaScript 对

它进⾏操作

示例：

<!DOCTYPE html>

<title>HTML标签实例--格式化标签</title>

</head> <body>

<h3>HTML介绍</h3>

<p>超⽂本标记语⾔(Hyper Text Markup Language)，标准通⽤标记语⾔下的⼀个应⽤。HTML 不

是⼀种编程语⾔，⽽是⼀种标记语⾔ (markup language)，是⽹⻚制作所必备的。</p>

<p>“超⽂本”就是指⻚⾯内可以包含图⽚、链接，甚⾄⾳乐、程序等⾮⽂字元素。<br/>

超⽂本标记语⾔的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提

供关于⽹⻚的信息，“主体”部分提供⽹⻚的具体内容。</p>

<hr/>

你的爱好：

<ul>

</ul>

</ol>

<dl>

</dl>

</body>

</html>

HTML图像标签

在HTML⽹⻚中插⼊⼀张图⽚，使⽤img标签，他是⼀个单标签： <img />

其中img标签中常⽤属性如下：

src：图⽚名及url地址

alt: 图⽚加载失败时的提示信息

title：⽂字提示属性

width：图⽚宽度

height：图⽚⾼度

border：边框线粗细

理解绝对路径和相对路径

绝对路径：

绝对路径就是你的主⻚上的⽂件或⽬录在硬盘上真正的路径，(URL和物理路径)

例如：

C:\xyz\test.txt 代表了test.txt⽂件的绝对路径。

http://www.sun.com/index.htm也代表了⼀个URL绝对路径。

相对路径：

相对与某个基准⽬录的路径。包含Web的相对路径（HTML中的相对⽬录），

例如：

在Web开发中，"/"代表Web应⽤的根⽬录。

和物理路径的相对表示，

例如："./" 代表当前⽬录,

"../"代表上级⽬录。这种类似的表示，也是属于相对路径。

示例：

<!DOCTYPE html>

<title>Document</title>

</head> <body>

<h3>HTML标签实例--图⽚标签</h3>

</body>

</html>

HTML超链接标签

超级链接标签a：

格式： <a href="链接⽬标url地址">显示⽂字</a>

a标签的属性：

href: 必须，指的是链接跳转地址

target: 表示链接的打开⽅式：

_blank 新窗⼝

_parent ⽗窗⼝

_self 本窗⼝（默认）

_top 顶级窗⼝

framename 窗⼝名

title：⽂字提示属性（详情）

锚点链接：

定义⼀个锚点： <a id="a1"></a> 以前使⽤的是 <a name="a1"></a>

使⽤锚点： <a href="#a1">跳到a1处</a>

示例：

<!DOCTYPE html>

<title>Document</title>

</head> <body>

<h1>HTML标签实例--超级链接标签</h1>

本地链接：<a href="3.html">3.html</a>

锚点：<a href="#myimg">我的⼥友</a> <br/>

<hr/>

</body>

</html>

HTML表格标签

<table> 定义表格 border、width、cellspacing、cellpadding

<caption>定义表格标题 align排列⽅式

<th> 定义表格的表头 align,valign,bgcolor、rowspan、colspan、width、height

<tr> 定义表格的⾏ align,valign,bgcolor

<td> 定义表格单元格 align,valign,bgcolor、rowspan、colspan、width、height

<thead> 定义表格的⻚眉 align,valign

<tbody> 定义表格的主体 align,valign

<tfoot> 定义表格的⻚脚 align,valign

示例：

<!DOCTYPE html>

<title>Document</title>

</head> <body>

<h3>HTML标签实例--表格标签</h3>

<tr>

</tr>

<tr>

<td>python04</td>

</tr>

<tr>

<td rowspan="2">python04</td>

</tr>

<tr>

</tr>

</table>

</body>

</html>

HTML表单标签

(1) <form>...</form> 表单标签

form标签常⽤属性：

*action属性:提交的⽬标地址(URL)

*method属性:提交⽅式:get(默认)和post

get⽅式是URL地址栏可⻅,⻓度受限制(IE2k ⽕狐8k),相对不安全.

post⽅式是URL地址不可⻅,⻓度不受限制,相对安全.

enctype:提交类型

target: 在何处打开⽬标 URL。

name:属性为表单起个名字.在HTML5中使⽤ id 代替。

(2) <input> 表单项标签input定义输⼊字段，⽤户可在其中输⼊数据。在 HTML 5 中，type 属性有很

多新的值。

具体在下⾯有详解：

如：<input type="text" name="username">

*type属性:表示表单项的类型:值如下:

text:单⾏⽂本框

password:密码输⼊框

checkbox:多选框注意要提供value值

radio:单选框（名字相同时才能单选）注意要提供value值

file:⽂件上传选择框

button:普通按钮

submit:提交按钮

image:图⽚提交按钮

reset:重置按钮, 还原到开始(第⼀次打开时)的效果

hidden:主表单隐藏域,要是和表单⼀块提交的信息,但是不需要⽤户修改

email ⽤于应该包含 e-mail 地址的输⼊域

url ⽤于应该包含 URL 地址的输⼊域

number ⽤于应该包含数值的输⼊域。

max 规定允许的最⼤值

min 规定允许的最⼩值

step 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）

value 规定默认值

range ⽤于应该包含⼀定范围内数字值的输⼊域，显示为滑动条

max 规定允许的最⼤值

min 规定允许的最⼩值

step 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）

value 规定默认值

⽇期选择器 Date pickers

date - 选取⽇、⽉、年

month - 选取⽉、年

week - 选取周和年

time - 选取时间（⼩时和分钟）

datetime - 选取时间、⽇、⽉、年（UTC 时间）

datetime-local - 选取时间、⽇、⽉、年（本地时间）

search ⽤于搜索域，⽐如站点搜索或 Google 搜索

color 颜⾊选择

*name属性: 表单项名,⽤于存储内容值的

*value属性: 输⼊的值(默认指定值)

*placeholder: 预期值的简短的提示信息

size属性: 输⼊框的宽度值

maxlength属性: 输⼊框的输⼊内容的最⼤⻓度

readonly属性: 对输⼊框只读属性

*disabled属性: 禁⽤属性（彻底废掉，不传送值）

*checked属性: 对选择框指定默认选项

accesskey属性: 指定快捷键(不常⽤) (IE:alt+键⽕狐:alt+shift+键)

tabindex属性: 通过数字指定tab键的切换顺序(不常⽤)

src和alt是为图⽚按钮设置的

注意：reset重置按钮是将表单数据恢复到第⼀次打开时的状态，并不是清空

image图⽚按钮，默认具有提交表单功能。

(3) <select>...</select> 标签创建下拉列表。

name属性:定义名称,⽤于存储下拉值的

size：定义菜单中可⻅项⽬的数⽬，html5不⽀持

disabled 当该属性为 true 时，会禁⽤该菜单。

multiple 多选

<option>... </option> 下拉选择项标签,⽤于嵌⼊到<select>标签中使⽤的;

*value属性:下拉项的值

*selected属性:默认下拉指定项.

(4) <textarea>...</textarea> 多⾏的⽂本输⼊区域

name :定义名称,⽤于存储⽂本区域中的值。

cols ：规定⽂本区内可⻅的列数。

rows ：规定⽂本区内可⻅的⾏数。

disabled：是否禁⽤

readonly：只读

...

默认值是在两个标签之间

(5) <button>...</button> 标签定义按钮。

您可以在 button 元素中放置内容，⽐如⽂档或图像。这是该元素与由 input 元素创建的按钮的不同之

处。

(6) <fieldset> --fieldset 元素可将表单内的相关元素分组。

disabled属性：定义 fieldset 是否可⻅。

form属性：定义该 fieldset 所属的⼀个或多个表单。

(7) <legend></legend> -- 标签为 <fieldset> 、 <figure> 以及 <details> 元素定义标题。

<form>

姓名：<input type="text" /><br/>

年龄：<input type="text" /><br/>

</fieldset>

身⾼：<input type="text" /><br/>

体重：<input type="text" /><br/>

</fieldset>

</form>

(8) <optgroup> html5标签-- <optgroup> 标签定义选项组。此元素允许您组合选项

城市：

</optgroup>

</optgroup>

</select>

(9) <datalist> html5标签-- <datalist> 标签定义可选数据的列表。与 input 元素配合使⽤，就可以

制作出输⼊值的下拉列表。

搜索：

</datalist>

</form>

HTML框架标签：

属性：src：规定在 iframe 中显示的⽂档的 URL

name：规定 iframe 的名称

height：规定 iframe 的⾼度。

width：定义 iframe 的宽度。

frameborder：规定是否显示框架周围的边框。

例如：<iframe src="1.html" name="myframe" width="700" height="500"></iframe>

HTML5

新增布局标签：

header 定义⽂档的⻚眉

nav 定义导航链接部分

footer 定义⽂档或者节的⻚脚/底部

article 定义⽂章

section 定义⽂档中的节（section/段落）

aside 定义其所处内容之外的内容/侧边

datalist 定义选项列表，与input 配合使⽤该标签，两者通过id关联

fieldset 可将表单内的相关元素打包/分组, 与legend 搭配使⽤

新增的input type属性值

这些新增的类型，更加细化的限定了输⼊内容，如果输⼊格式不对，在提交的时候会⾃动给出相应

提示

更多新增type 参考 w3school

email <input type="email"> 输⼊邮箱格式

tel <input type="tel"> 输⼊⼿机号

url <input type="url"> 输⼊url

number <input type="number"> 输⼊数字

search <input type="search"> 搜索框（体现语义化）

range <input type="range"> ⾃由拖动的滑块

time <input type="time"> 输⼊⼩时分钟

date <input type="date"> 输⼊年⽉⽇

datetime <input type="datetime"> 输⼊⽇期时间

month <input type="month"> 输⼊⽉年

week <input type="week"> 输⼊星期年

color <input type="color"> 调出调⾊板

新增的input属性

placeholder 提示⽂本，参考 android TextView 的hintText

autofocus ⾃动获取焦点

multiple 多⽂件上传

autocomplete

⾃动完成，取值 on、 off。on表示记录已经输

⼊的值供下次⾃动完成。此外，必须有提交按

钮，必须设置name 属性，然后该属性才会⽣效

required 必填项

accesskey 定义让控件获取焦点的快捷键，快捷键采⽤alt +

字⺟的形式

多媒体标签：

你的浏览器不⽀持播放

</audio> <br/>

你的浏览器不⽀持播放

</audio> <br/><br/>

你的浏览器不⽀持视频播放

</video> <video controls loop poster="tiao.jpg">

您的破浏览器该扔了，不⽀持视频标签

</video> <br/><br/>

雨天娃娃丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Java学习（前端HTML）

HTML简介HTML是什么？HTML 是 HyperText Mark-up Language 的⾸字⺟简写，意思是超⽂本标记语⾔HTML不是⼀种编程语⾔，⽽是⼀种标记语⾔超⽂本指的是超链接，标记指的是标签，是⼀种⽤来制作⽹⻚的语⾔，这种语⾔由⼀个个的标签组成⽤这种语⾔制作的⽂件保存的是⼀个⽂本⽂件，⽂件的扩展名为 .html 或者 .htmhtml⽂档也叫 Web⻚⾯，其实就是⼀个⽹⻚，html⽂件⽤编辑器打开显示的是⽂本，可以⽤⽂本的⽅式编辑它如果⽤
复制链接

扫一扫