一:HTML
HTML:全称是:Hyper Text Markup Language
(超文本标记语言)。目前我们使用的版本是:HTML5。
W3C:全称是:World Wide web Consortium
:(万维网联盟)。
W3C标准包括:
(1)结构化标准语言:HTML
,XML
(2)表现标准语言:css
(3)行为标准:DOM
,ECMAScript
HTML基本结构如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
一些标签讲解:
(1)!DOCTYPE html
:告诉浏览器,我们要使用什么规范,默认为html5。
(2)<body>
标签:代表网页主体,网页上显示的所有东西都在这标签下面写。
(3)<meta>
:用来描述网站的一些相关信息。
(4)<title>
:网页标题。
二:HTML中的基础标签
(1)标题标签:
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
(2)段落标签:
<p>牛马 绯红之王</p>
<p>两只老虎</p>
(3)换行标签:
<br/>
(4)水平线标签:
<hr/>
(5)字体标签样式:
<!--粗体-->
<strong>i love you</strong>
<!--斜体-->
<em>i love you</em>
(6)一些特殊符号:
<!--空格-->
空 格
<!--大于小于-->
>
<
(7)图像标签:
<img src="../image/u=3007709509,2093393272&fm=26&gp=0.jpg"
alt="加载失败" title="小狐狸" height="375" width="500">
常见的图像格式:GIF
,JPG
,PNG
。
src
有两种路径
(1)相对路径:相对于项目的某个文件路径。推荐使用相对路径。../
表示上一级目录。
(2)绝对路径:如D:\computer_study\web\web_front\html_css\image\4H@ZX$BDOLW3Q42DEJH9H}A.png
这种的就是绝对路径。
alt
属性表示当图片加载出错时代替图片的文字。
title
属性表示鼠标悬停在图片上时出现的文字。
height
和width
属性表示图片的高度和宽度。
(8)超链接标签:
页面链接:(页面之间跳转)
<a href="https://www.baidu.com" target="_blank">百度</a>
<a href="https://www.baidu.com" target="_self">百度</a>
href
属性表示跳转到哪个地址页面或跳转到某个网站。
target
属性表示在哪里打开:
(1)target="_blank"
表示在新标签中打开。
(2)target="_self"
表示在当前页面打开。
锚链接:(跳转到页面的某个指定部分)
<a name="top">顶部</a>
<a href="#top">回到顶部</a>
功能性链接:(发送邮件)
<a href="mailto:1934541225@qq.com">点击联系我</a>
(9)列表标签
有序列表:
<ol>
<li>java</li>
<li>python</li>
<li>c/c++</li>
</ol>
无序列表:
<ul>
<li>java</li>
<li>python</li>
<li>c/c++</li>
</ul>
自定义列表:
<dl>
<dt>学科</dt>
<dd>java</dd>
<dd>python</dd>
<dd>c/c++</dd>
</dl>
(10)表格标签
<table>
<tr>
<td>java</td>
<td>c</td>
<td>python</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
</tr>
</table>
<tr>
:表示表格中的一行。
<td>
:表示表格中的一列。
colspan
和rowspan
:跨列和跨行。后面的数字代表跨多少行或多少列。
<td colspan="2">java</td>
<td rowspan="2">Linux</td>
(11)音频和视频标签
视频标签:
<video src="../video/P138.游泳教练【淘宝店铺:控制不当%20鬼畜素材】.mp4"
controls autoplay></video>
controls
属性表示可以控制视频的播放,如快进、音量等。
autoplay
属性表示打开网页自动播放。
音频标签:
<audio src="../audio/狂三的威风绅士.mp3"
controls autoplay></audio>
(12)内联框架标签
即在一个页面里面内嵌另一个页面。
<iframe src="https://www.baidu.com"
width="800px" height="1000px"></iframe>
(13)表单标签
<form action="HTML基本结构.html" method="get">
<p>
用户:<input type="text" name="username">
</p>
<p>
密码:<input type="password" name="password">
</p>
</form>
action
属性可以是网站,也可以是请求地址。
method
属性是提交方式,有GET
和POST
两种方式。GET
方式提交我们可以在url看到提交的信息,不安全,不能传输大文件,但是高效。POST
方式提交比较安全,同时可以传输大文件。
(14)文本框、单选框、按钮、多选框和文件域
type
属性为元素类型:
(1)type="text"
为文本框,默认也是为文本框。
(2)type="password"
为密码框,在浏览器上输入以*
显示。
<p>
用户:<input type="text" name="username" value="龙兄">
</p>
<p>
密码:<input type="password" name="password" value="123456">
</p>
name
属性为元素的名字。
value
属性为默认的初始值。
size
属性为文本框的长度。
(3)type="radio"
为单选框,要为选项指定为同组,如性别分为男、女
则必须指定属性name
为同一组,不然就不是单选:
<p>性别:
<input type="radio" name="gender" value="boy" checked>男
<input type="radio" name="gender" value="girl">女
</p>
name
属性为元素的名字。
value
属性为值。
checked
为默认选项。
(4)type="checkbox"
为多选框:
<p>爱好:
<input type="checkbox" name="hobby" value="sleep">睡觉
<input type="checkbox" name="hobby" value="code" checked>敲代码
<input type="checkbox" name="hobby" value="chat">聊天
<input type="checkbox" name="hobby" value="game">玩游戏
</p>
checked
属性为默认选项。
(5)按钮标签:
<p>
<input type="button" name="btn" value="普通按钮">
<input type="image" name="btn" value="图像按钮">
<input type="submit" name="btn" value="提交按钮">
<input type="reset" name="btn" value="重置按钮">
</p>
type="button"
为普通按钮。
type="image"
为图像按钮。
type="submit"
为提交按钮。
type="reset"
为重置按钮。
(6)type="file"
为文本域:
即可以上传本地文件到网页上。
<p>
<input type="file" name="files">
</p>
(15)列表框(下拉框)
<p>国家:
<select name="country">
<option value="china" selected>中国</option>
<option value="america" >美国</option>
<option value="england" >英国</option>
</select>
</p>
selected
属性为默认选项。
(16)文本域
即多行文本:
<p>反馈:
<textarea name="textarea" cols="50" rows="10"></textarea>
</p>
cols
属性为多少列。
rows
属性为多少行。
(17)简单验证、滑块和搜索框
type="email"
邮箱验证:
<p>
<input type="email" name="email">
</p>
type="url"
为url验证:
<p>
<input type="url" name="url">
</p>
type="range"
为滑块:
<p>音量:
<input type="range" name="volume" min="0" max="100">
</p>
min
和max
属性为滑块的最小值和最大值。
(18)隐藏域
type="hidden"
为隐藏域;
在前端不显示出来,但是可以传到后端,在开发中很有用。
<p>
<input type="hidden" name="username">
</p>
(19)增强鼠标可用行
label
标签可以在不点击到框的时候,也能选中,如下所示,点击文字“你点我试试”也能点击到文本框。
<p>
<label>你点我试试
<input type="text" name="username">
</label>
</p>
(20)简单的表单验证
<p>
用户:<input type="text" name="username" placeholder="请输入用户名"
required>
</p>
属性placeholder
为提示信息,提示输入框里应该填什么。
属性required
为非空提示,表示这个输入框不能为空,否则不能提交。