(1)介绍:
-
HTML(HyperText Markup Language):超文本标记语言,标记语言是一套标签;
-
标签有两种形式:
-
双标签
-
单标签
-
-
基本骨架:
<!-- 文档类型声明,位于文档最前面,处于标签之前。他是网页必备的组成部分,避免浏览器怪异模式。 -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>头</title>
</head>
<body>
体
<img src="">
</body>
</html>
-
完整骨架解释详情:
<!-- 文档类型声明,位于文档最前面,处于标签之前。他是网页必备的组成部分,避免浏览器怪异模式。 -->
<!DOCTYPE html>
<!-- <html>元素。这个元素包裹了整个完整的页面,是一个根元素。 -->
<html lang="en">
<!-- <head>元素。这个元素是一个容器,它包含了所有你想包含在 HTML 页面中但不想在 HTML 页面中显示的内容。
这些内容包括你想在搜索结果中出现的关键字和页面描述,CSS 样式,字符集声明等等。 -->
<head>
<!-- meta标签描述一个HTML网页的属性 -->
<meta charset="UTF-8"> <!-- 这个元素设置文档使用 utf-8 字符集编码,utf-8 字符集包含了人类大部分的文字。-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 设置网页文档的标题,显示在浏览器窗口的标签栏。 -->
<title>Document</title>
<!-- 设置网页文档的icon -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<!-- 包含了你访问页面时所有显示在页面上的内容,文本,图片,音频,游戏等等。 -->
<body>
我会显示在浏览器中!
Helllo world!
你好,中国!
</body>
</html>
(2)标签:
-
标题:
<body> <h1>一级标签</h1> <h2>二级标签</h2> <h3>三级标签</h3> <h4>四级标签</h4> <h5>五级标签</h5> <h6>六级标签</h6> <!-- 同时生成六级标签的快捷键 h$*6 --> <!-- 正确使用标题标签,不要为了粗体或者大号文本而使用标题 --> <!-- 快捷键:h$*6--> </body>
-
段落、换行、水平线:
<body>
<p>段落标签</p>
<p>风萧萧兮易水寒,<br>换行;壮士一去兮不复还。</p>
<hr>
<!-- <br> 换行 -->
<!--<hr>代表下划线-->
<!-- color:设置水平线的颜色;
width:设置水平线的宽度;
size:设置水平线的高度
align:设置水平线的对齐方式(默认居中),了取值left|right
-->
</body>
-
图片:
<body>
<!--
src:路径(图片地址与名字)可以是远程也可以是本地
alt:规定图片的替代文字(当图片无法加载时候显示)
width:图片宽度300px
height:图片高度(一般不设置)
title:鼠标悬停在图片上给予提示1
-->
<img src="/1.jpeg" alt="加载错误" title="京东" width="" height="">
<img src="/1.jpeg" alt="加载错误" title="京东" width="" height="">
<img src="/01_HTML基础骨架/favicon.ico" alt="" height="200">
<img src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1llXjx.img?w=1920&h=1080&q=60&m=2&f=jpg" alt="">
<!--
绝对路径:绝对路径是指文件在硬盘上真正存在的路径。
相对路径:相对于自己的目标文件位置。
根目录关系:/
父级关系:../
同级关系:./
-->
</body>
-
超文本链接:
<body>
<!-- 注意链接必须要把协议写清楚 -->
<a href="https://www.baidu.com" target="_self">我是一个可以跳转的链接</a>
<a href="../04_图片标签/index.html">跳转链接</a>
<a href="#">这个是一个新跳转,你们看看我有什么不同!</a>
<!-- 新窗口跳转页面,不覆盖原页面 -->
<a href="" target="_blank">又打开了一个新窗口</a>
</body>
-
文本:
<body>
<strong>asjdioo</strong>
<em>em标签</em> <!-- 定义着重文字 -->
<b>b标签</b> <!-- 定义粗体文字 -->
<i>i标签</i> <!-- 定义斜体文字 -->
<strong>strong标签</strong> <!-- 定义加重文字 -->
<del>del标签</del> <!-- 定义删除文字 -->
<u>下划线</u>
<s>s标签删除</s>
</body>
-
列表标签:
<body>
<!-- 有序列表 -->
<!--
type 属性的选项
· 1 列表选项序号是阿拉伯数字(1,2,3,4...)
· a 列表选项序号是小写字母 (a,b,c...)
· A 列表选项序号是小写字母 (A,B,C...)
· i 列表选项序号是小写罗马
· I 列表选项序号是大写罗马
-->
<ol type="I">
<li>苹果</li>
<li>香蕉</li>
<li>榴莲</li>
</ol>
<!-- 无序列表 -->
<!--
type 属性的选项
disc 默认的实心圆
circle 空心圆
square 方块
none 不显示
-->
<!-- 快捷键ul>li*3 -->
<ul type="square">
<li>火锅</li>
<li>烤鸭</li>
<li>烤肉</li>
<li>烤串</li>
<li>日料</li>
</ul>
</body>
-
表格:
<body>
<!--
表格的属性
border:设置表格的边框
width:设置表格的宽度
height:设置表格的高度
表格:<table>
行:<tr>
单元格(列):<td>
-->
<table>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>
<!-- 快捷键 table>tr*2>td{文本} -->
<!-- 合并单元格
水平合并:colsapn 保留左边删除右
垂直合并:rowspan 保留上边删除下
-->
<p>合并单元格6和7</p>
<p>合并单元格15和20</p>
<table border="1" width="400px" height="400px">
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
</tr>
<tr>
<td colspan="2">单元格6</td>
<!-- <td>单元格7</td> -->
<td>单元格8</td>
<td>单元格9</td>
<td>单元格10</td>
</tr>
<tr>
<td>单元格11</td>
<td>单元格12</td>
<td>单元格13</td>
<td>单元格14</td>
<td rowspan="2">单元格15</td>
</tr>
<tr>
<td>单元格16</td>
<td>单元格17</td>
<td>单元格18</td>
<td>单元格19</td>
<!-- <td>单元格20</td> -->
</tr>
<tr>
<td>单元格21</td>
<td>单元格22</td>
<td>单元格23</td>
<td>单元格24</td>
<td>单元格25</td>
</tr>
</table>
</body>
-
表单:
-
由容器和控件组成,一个表单一般包含用户填写信息的输入框,按钮等,这些输入框、按钮叫做控件,表单就是容器,它能够容纳各种各样的控件;
-
一个完整的表单包含三个基本组成部分:表单标签、表单域< form>< /form>、表单按钮
<body>
<!-- HTML 表单用于搜集不同类型的用户输入。-->
<!-- action 服务器地址,通常,表单会被提交到 web 服务器上的网页。
如果省略 action 属性,则 action 会被设置为当前页面。 -->
<!-- method 属性规定在提交表单时所用的 HTTP 方法(GET 或 POST)
get和post区别:
1:数据提交方式,get把提交的数据url可以看得,post看不到;
2:get一般用于提交少量数据,post用来提交大量数据;
-->
<!-- name 表单的名字:用以区分多个表单 -->
<form action="http://www.baidu.com" method="get|post" name="myhFormName"></form>
<!-- HTML 表单包含表单元素。 表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。 -->
<form>
用户名:<input type="text" placeholder="请输入用户名" value=""> <br>
密码:<input type="password"> <br>
性别:男<input type="radio" name="sex" checked> 女<input type="radio" name="sex"> <br>
多选框:<input type="checkbox" name="fuxuan" checked><br>
<!-- multiple 多个文件 -->
上传文件:<input type="file" multiple> <br>
<select>
<option>北京</option>
<option selected>上海</option>
<option>天津</option>
<option>山西</option>
</select>
<br>
<textarea name="" id="" cols="3" rows="3">这是文本域</textarea> <br>
<!-- label只针对于表单绑定,其他元素没有效果 -->
<!-- 定义和用法
<label> 标签为 input 元素定义标注(标记)。
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。
就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
-->
性别:<label for="man">男</label><input type="radio" name="sex" id="man">
<label>女<input type="radio" name="sex" ></label> <br>
<input type="submit" value="注册">
<input type="button" value="按钮">
<input type="reset" value="重置">
<button>注册</button>
</form>
<form>
<input type="text">
</form>
</body>
-
媒体标签:
-
<body> <audio src="Hunk Golden - Leather Jerk.mp3" controls autoplay>这个是音乐播放器</audio> <video src="video.mp4" controls="controls"></video> <!-- <video> 视频</video> <audio>音频</audio> --> </body>
-
块元素与行内元素:
-
常见块级元素:div/form/h1~h6/hr/p/table/ul……
-
常用内联元素(行元素):a/b/em/i/span/strong……
-
行内块级元素(特点:不换行、能够识别宽高):button、img、input……
<body>
<!--
<div> 可定义文档中的分区或节(division/section)。
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。
<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是 <div> 固有的唯一格式表现。
-->
<div>div元素1</div>
<div>div元素2</div>
<!--
<span> 标签被用来组合文档中的行内元素。
使用 <span> 来组合行内元素,以便通过样式来格式化它们。
-->
<span>span元素</span>
<span>span元素</span>
<div>
<b>
<span>asds some text!</span>
</b>
</div>
</body>
-
html5新添标签: