HTML(Hyper Text Markup Language)

HTML:超文本标记语言
超文本:超过文本、超级文本
不仅可以包含文本,还可以包含例如图片、音频、视频等各种格式
标记:标签、元素,指的是用尖括号括起来的一组内容,例如:

        <div>,<img>,<h1>,<table>,<form>,<p>,<span>
        <div></div>

主要就是用来开发网页的。

关于HTML:
1)HTML开发的网页文档,通常是以 .htm、.html 为后缀
2)HTML开发的网页文档,可以通过浏览器打开并显示(浏览器就是一个HTML解析器)
3)HTML本质就是一个文档(html/txt/word/ppt等)

HTML结构
<!DOCTYPE html>:用于声明当前文档是一个html格式的网页,并且版本是html5.0版本。
<html>:根标签,所有的html内容都应该放在根标签内部
<head>: 头部分,用于存放网页的基本属性信息(例如:网页标题,网页的编码,引入的css文件,或JS文件)
<body>: 体部分,用于存放网页的可视化内容
<title>我的第一个网页</title>: 指定网页标签的标题
</h1><h1>\~</h1><h6>: 指定网页内容的标题,例如文章/新闻等标题
<meta charset="utf-8">: 通知浏览器当前网页使用的编码,如果不指定这一行,网页文件保存使用utf-8,浏览器在打开这个网页时,如果不使用utf-8,就可能会出现乱码问题。

找项目在硬盘的位置:右键项目-在外部资源管理器打开

用浏览器去打开HTML文件是,如果不显示内容,检查是否保存了,没保存不行。

用HBuilder上面工具栏的运行来打开HTML文件,是先把文件传到服务器再通过浏览器去请求服务器上的这个文件展现的,所以网址路径不同。

HTML语法
1)标签、标记、元素:就是用尖括号(<>)括起来的一组内容,例如:<head>,<body>,<h1>,<img>,

2)标签分为开始标签()和结束标签(),通常开始和结束标签之间还可以存放其他内容。
<head>

        <title>标题</title>
    </head>
    注意:浏览器对html的语法要求特别的不严格,比如标签只有开始没有结束,比如标签大小写混用,再比如标签不合理嵌套,浏览器都会正常显示网页内容(但是不推荐这样写,因为不符合规范)。
    

3)自闭标签: 有些标签内部不需要写内容,通常可以写成自闭标签

    <img/>,<input/>,<br/>,<hr/>等
    <img/> == <img></img>
    

4)属性: 属性必须声明在标签上,属性可以有多个,多个属性之间用空格隔开
属性包括属性名和属性值,属性名和属性值中间用等号连接
属性的值用双引号或者单引号引起来。
<img src="xx" id="xx" name="xx">
<img src="xx" id="xx" name="xx">

5)注释格式:
注释作用:a)为代码添加解释说明
b)将一些暂时不需要执行的代码注释
c)html注释中的内容浏览器不会解析,更不会显示

6)如何在网页中输入空格和换行
由于浏览器会将多个连续的空白字符(空格、换行、制表符)解析成一个空格来显示,因此如果要想做空格或者换行需要用其他符号代替。
a)可以使用   实现空格
b)可以使用 <br/> 标签实现换行
c)  是中文字符的空格

HTML标签

1、图像标签
img标签可以在网页中插入一幅图像,例如:
<img src="./2021-03-29_155817.png">
<img src="2021-03-29_155817.png">
其中,src属性: 用于指向图片的路径(相对路径,网络路径)
width属性: 指定图片的宽度
height属性: 指定图片的高度

关于路径问题:
1)不建议写带盘符的绝对路径,因为将来换一个发布环境,这个路径很可能是错的,所以不建议

<img src="D:/JavaDevelop/HBuilderProjects/CGB-HTMLCSS-01/img/meinv02.jpg)

2)建议写相对路径

./: 表示当前文件所在的位置,可以省略不写
../: 表示当前文件所在目录的上一级目录

2、超链接标签
a标签用于在网页中实现一个超链接
点击超链接后,会跳转到另外一个位置(网页、图片、下载地址等),例如:

百度一下,你就不知道

其中href属性,用于指向所跳转到的url地址
target属性,用于指向以何种方式打开超链接
\_self: 在当前窗口打开超链接
\_blank: 在新窗口中打开超链接

3、表格标签
table: 用于定义一个表格,其中可以包含tr标签
tr(table row): 用于定义表格中的行, tr中可以包含td/th
td/th(table data cell): 用于定义表格中的单元格
th(table header cell): 用于定义表头中的单元格,其中的文本默认会加粗并且居中。

colspan属性:设置单元格横跨的列数,例如:

    <td colspan="2">11</td>
    colspan="2": 设置当前单元格横跨两列

rowspan属性:设置单元格竖跨的行数

    <td rowspan="2">21</td>
    rowspan="2": 设置当前单元格竖跨两行
 

4、音频、视频标签
4.1.音频标签

audio可以在网页中插入音频流
<audio controls src="audio/沙漠骆驼_展展与罗罗.mp3">
    如果您看到这段内容,则说明您的浏览器不支持此标签
</audio>
src属性: 指定所要插入的音频的url地址
controls属性: 为用户添加播放、暂停、音量控制等插件
autoplay属性: 在音频加载完成后,立即播放(自动播放)
width、height: 设置元素的宽度和高度

4.2.视频标签

video可以在网页中插入视频流
<video autoplay controls src="video/小拳拳.mp4">
    如果您看到这段内容,则说明您的浏览器不支持此标签
</video>
src属性: 指定所要插入的视频的url地址
controls属性: 为用户添加播放、暂停、音量控制等插件
autoplay属性: 在视频加载完成后,立即播放(自动播放)
width、height: 设置元素的宽度和高度

4.3.div/span/p标签

div/span/p标签是非常普通的但是又很常用的标签
这三个元素都是容器标签,可以用来包裹其他的标签或者文本
在标签上设置样式,就可以作用在其中的内容上。
<div style="color:red;font-size:30px">
    <span>文本文本文本</span>
    <input />
    <p>这是一个p元素</p>
</div>

div、p:是块元素,默认独占一行,都可以设置宽高

   同是块元素的还有: h1~h6,form,table,div,p等

span:是行内元素,多个行内元素可以显示在同一行,不能设置宽高

  同是行内元素的还有: span,b,i,u,input,img等,但是input,img可以设置宽高
  

5、表单标签
5.1.表单的作用

表单的作用: 用于向服务器发送数据
向服务器发送数据的两种方式:
1)使用表单向服务器发送数据
    表单中往往存在表单项标签(用户名、密码、昵称、邮箱、验证码等),在表单项中可以输入数据,再提交表单就可以将输入的数据提交给相应的服务器。
2)使用超链接也可以向服务器发送数据
    http://www.baidu.com?user=张三&age=20&like=篮球
    在URL地址后面可以拼接问号,问号之前是url地址,问号之后可以拼接参数,参数包括参数名(user,age,like),和参数值(张三,20,篮球),多个参数之间用&分隔。在输入地址后访问服务器,就可以将地址后面拼接的参数一并带给服务器

5.2.form标签

<form action="http://www.baidu.com" method="GET|POST">
    ...
</form>
其中action属性:用于指定表单中的数据将会提交到哪个地址。
    例如:action属性指向百度服务器的网址,就意味着,表单中的所有数据都会提交到百度服务器。
method属性:指定提交方式,常用提交方式为GET和POST(区别后面会讲到)
    如果不指定method,默认是GET提交。

6、表单项标签
1)文本输入框(用户名/验证码/邮箱/昵称)

<input type="text" name="username"/>
<input type="text" name="email"/>
<input type="text" name="nickname"/>

特点:输完了内容可见

2)密码输入框(密码/确认密码)

<input type="password" name="psw"/>
<input type="password" name="repsw"/>

特点:输入的内容是不可见的

3)单选框(性别/单选题选项)

<input type="radio" name="gender"/>男
<input type="radio" name="gender"/>女

4)多选框/复选框(多选题选项/岗位/爱好)

<input type="checkbox" name="like"/>篮球

5)下拉选框(省份/城市/市区选择)

select: 定义一个下拉选框
option: 定义下拉选框中的选项
<select name="prov">
    <option>北京市</option>
    <option>上海市</option>
    <option>广东省</option>
    ...
</select>

6)多行文本输入框

textarea: 定义多行文本输入框, 当需要写大段文本时可以通过多行文本输入框进行编写
<textarea name="desc" placeholder="请输入信息"></textarea>

不要在这个标签内部写空格或者换行,因为在网页上展示的时候会有。
placeholder是在5.0版本后才有的属性,是指定输入框中的提示信息。

7)按钮/提交按钮

<button type="button">换一张</button>
<input type="button" value="换一张"/>
普通按钮本身没有功能

<button type="submit">提交/登录/注册</button>
<input type="submit" value="提交/登录/注册"/>
提交按钮用于提交表单,将表单中的数据提交给action属性所指向的服务器

7、注册表单案例
表单项的细节问题:
1)表单项上的name属性有什么作用?

<input type="text" name="user"/>
<input type="password" name="psw"/>
要提交数据的表单项(例如:用户名/密码/性别/爱好/昵称/邮箱/验证码等)都必须得有name属性,如果没有name属性,在表单提交时,该项会被忽略(即无法提交数据)

2)为什么单选框可以多选?
所有单选框的name属性值必须相同,值相同则说明是一个组,一个组中的单选框只能选一个(即单选)

<input type="radio" name="gender"/>男
<input type="radio" name="gender"/>女

3)为什么单选框或复选框提交时的值为on?
因为单选框或复选框不像文本输入框,输入在框中的内容就会作为value提交
单选框或复选框不能输入,所以只能通过value属性来指定提交时的值

<input type="radio" name="gender" value="male"/>男
<input type="radio" name="gender" value="female"/>女
<input type="checkbox" 
    name="like" value="basketball"/>篮球

4)如何设置单选框或复选框默认选中某一项?

<input type="radio" checked name="gender" value="male"/>男
<input type="checkbox" checked
    name="like" value="football"/>足球

在单选框或复选上可以添加checked属性来设置某一项默认被选中
由于浏览器在解析时,只检查单选框或复选框上有没有checked属性,不检查值,所有只需要添加这个属性即可,不需要指定值

5)如何设置下拉选框中的某一项默认被选中?
下拉选框默认选中第一项, 如何要设置第一项以外的其它选项默认被选中
可以在option标签上添加一个selected属性。

<select name="city">
    <option>北京</option>
    <option>上海</option>
    <option selected>广州</option>
    <option>深圳</option>
</select>

6)option标签上的value属性的作用是什么?
例如: 如果"上海"选项被选中,而"上海"的option上面没有value,则会提交city=上海;
如果在"上海"选项上有value属性,在"上海"被选中并提交时,就会提交value属性的值:即 city=shanghai

<select name="city">
    <option>北京</option>
    <option value="shanghai">上海</option>
    <option selected>广州</option>
    <option>深圳</option>
</select>
阅读 179
13 声望
6 粉丝
0 条评论
你知道吗?

13 声望
6 粉丝
宣传栏