HTML5_代码007

本文介绍: html超文本标记语言它包括一系列标签。通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。………

HTML基础

HTML的基本结构和属性

html：超文本标记语言
它包括一系列标签。通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。

HTML中的标签

标签分为单标签和双标签

单标签指的是标签单个出现
双标签指标签成对出现

标签的属性：来修饰标签的并且设置标签的一些功能

<标签名属性=“” ····>
（标签也可以嵌套使用）

例如：
使用双标签给字体加粗

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML</title>
</head>
<body>
<h><b>asd</b>nnnn</h>
</table>
</body>
</html>

其输出结果：

HTML
asdnnnn

（在b标签中的字体都被加粗）

HTML初始代码

<!DOCTYPE html>//文档声明，告诉浏览器
<html lang="en">//html文件的最外层标签，所有html代码都要在<html></html>内
<head>//头部标签
    <meta charset="UTF-8">//网页中的辅助信息，编码
    <title>HTML</title>//设置网页的头部标题
</head>
<body>
//此区域写网站内容
</body>
</html>

注释

<!--  注释内容   -->

注释的内容在网页中不显示，只在代码中能看到

文本修饰标签

b标签： <b></b>，该标签会对所修饰的文本进行加粗
em标签：<em></em>,该标签讲所修饰的文本字体改为斜体
上标：<sup></sup> 例如:a²
下标：<sub></sub> 例如:H₂O
删除：<del></del>,将文本中间加一条斜线，代表弃用。例如: ~~hhh~~
下划线(插入):<ins><ins>，插入文本，即在文本下加下划线。例如:hhh

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本修饰标签</title>
</head>
<body>
正常字体<br>
<b>我是加粗字体</b><br>
<em>我是斜体字</em><br>
a<sup>2</sup><br>
H<sub>2</sub>O<br>
<del>hhh</del><br>
<ins>hhh</ins>
</body>
</html

输出结果：

文本修饰标签正常字体

我是加粗字体

我是斜体字

a
²

H
₂O

~~hhh~~

hhh

图片标签

图片标签是一个单标签：<img src=" " alt=" " > ，其中src是图片的路径 alt是当图片不能正常显示的时候给出的提示，img标签还有width和height属性可以设置图片大小

路径：图片在同级目录下，路径可以直接使用图片的名称
也可以用绝对路径

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本修饰标签</title>
</head>
<body>
<img src="./hai.jpg" alt="这是海绵宝宝" width="200" height="100">
</body>
</html>

结果：
在这里插入图片描述
当图片不正常显示时的结果：

跳转链接

a标签：<a></a>,
属性：href，target
href：需要跳转的链接
target：设置跳转链接是否在新页面打开，默认为 _self ,在新页面打开 _blank
base 标签：改变链接跳转的行为，写在head标签中，
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>href</title>
    <base target="_blank">
</head>
<body>
<a href="http://baidu.com">baidu</a>//默认在之前的页面打开，但在head标签内设置了base属性，所以点击链接跳转新页面
</body>
</html>

结果：在这里插入图片描述
点击跳转至新页面：

跳转锚点

在页面中点击某个链接跳转至某一个具体的位置或段落
方法：在a标签的 href后加#+id。
代码演示如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>href</title>
    <base target="_self">
</head>
<body>
<a href="#asdas">点击跳转</a>

<h id="asdas">跳转到这里</h>

</body>
</html>

当在页面中点击跳转时，页面就会跳转到下面id位置

实现方式二

#+name属性
使用示例：

<a href="#abc">点此跳转</a>
<a  name="abc"></a>
<h1>跳转到此</h1>

此种方法比较繁琐，不建议使用

特殊符号

在html代码中为符合规范，建议特殊字符用代码给出，不建议键盘直接输入
在这里插入图片描述

列表标签

无序列表：ul 和li标签
使用方法：ul标签可以设置type属性，即设置字符前标点样式，circle为空心圆，默认为圆点
square为实心方块……
li标签内是可以嵌套其他标签的，ul 和li之间不可嵌套

<ul type="circle">
    <li><em>sdas</em></li>
    <li>sdas</li>
    <li>sdas</li>
</ul>

样式图：
在这里插入图片描述

有序列表： ol和li标签，它也可以设置type属性来改变前面标签的样式（一般用css）
使用方法大致和无序列表一样

<ol>
    <li>hh</li>
    <li>h</li>
    <li>h</li>
    <li>h</li>
</ol>

结果图：
在这里插入图片描述

定义列表：dl dt dd 标签实现对列表添加标题和对内容的描述
dl标签是列表名称，dd标签是对名称的解释

<dt>
    <dl>abc</dl>
    <dd>这是字母</dd>
    <dl>123</dl>
    <dd>这是数字</dd>
</dt>

在这里插入图片描述

表格标签

1）<table>：表格的最外层容器
<tr>：定义表格行
<th>：定义表头
<td>：定义表格单元
<caption>：定义表格标题

<table cellspacing="2" border="2" >
    <caption>title</caption>
    <tr>
        <th>姓名</th>
        <th>身高</th>
        <th>体重</th>
        <th>肺活量</th>
    </tr>
    <tr>
     <td>hh</td>
     <td>190</td>
     <td>100</td>
     <td>6000</td>
    </tr>

在这里插入图片描述

2）自定义标签：在网页中不显示

<tHead>、<tBody>、<tFoot>

注：在一个table中，tBody是可以出现多次，但是tHead、tFoot只能出现一个
3）表格属性：
boder：表格边框（用于table标签）
cellpadding：单元格内的空间（用于table标签）
cellspacing：单元格之间的空间（用于table标签）
rowspan：合并行（用于td标签）
colspan：合并列（用于th标签）
align：有center ，left ，right属性代表居中，左对齐和右对齐。
valign：top、middle、bottom。代表上，中，底部。

7、表单标签
1）input标签
<form action="">:表单的最外层容器
属性：action：提交页面的地址
<input type=""> 单标签：用于搜集用户信息，根据不同的type属性值，展示不同的控件
type属性含义
text 普通的文本输入框
password 密码输入框
checkbox 复选框
radio 单选框
file 上传文件
submit 提交按钮
reset 重置按钮
placeholder属性：一般是用来提示用户输入的，当用户真的输入了文字之后，会被输入的文字覆盖。
checked属性：首次加载时被选中
disabled属性：禁用一个表单元素
2）表单元素
<textarea>：多行输入字段（文本域）
<select>、<option>：下拉菜单
属性：
selected：默认被选中
size：显示的数量
multiple：可多选
<label>：辅助菜单，可扩大鼠标选中的范围
综合案例：

<form action="">
    昵称：<input type="text" placeholder="请输入昵称"><br>
    密码：<input type="password" placeholder="请输入密码"><br>
    头像：<input type="file"><br>
    性别：     <input type="radio" name="gen" id="1"><label for="1">男</label>
               <input type="radio" name="gen" id="0"><label for="0">女</label><br>
    爱好： <input type="checkbox"> 篮球
          <input type="checkbox"> 足球
          <input type="checkbox"> 乒乓球<br>
    所在省份    <select name="" id="">
        <option value="">江苏省</option>
        <option value="">安徽省</option>
        <option value="">山东省</option>
    </select>
    刷新：<input type="reset">&nbsp;&nbsp;&nbsp;&nbsp;提交：<input type="submit"><br>
    问题反馈：<textarea name="" id="" cols="10" rows="2"></textarea>
</form>