HTML5_代码007(未授权)

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

html：超文本标记语言
它包括一系列标签。通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。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

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

<!--  注释内容   -->

标题标签：双标签<h1> </h>—><h6> </h6>
段落标签：双标签<p> </p>
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML</title>
</head>
<body>
<h1>标题一</h1>
<h2>标题二</h2>
<h3>标题三</h3>
<h4>标题四</h4>
<p>这是一个段落</p>
我不是段落
</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

图片标签是一个单标签：<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>

<!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>

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

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

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

<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>

<tHead>、<tBody>、<tFoot>

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>