目录
1.用label将选项包含,通过label的for属性和input id扩大范围
2.用label将input和选项全部包含,但是不能有for属性
web前端基础认识
网站：因特网上根据一定的规则，用html等制作的用于展示特定内容相关的网页的集合。
网页：构成网站的基本原素，包含文字，图片，音频，视频，超链接等。
网页构成：结构（网页元素进行整理和分类 html），表现（外观样式 css），行为（网页模型的定义及交互的编写 JavaScript）。
html基础
什么是html？
html：超文本标记语言，描述网页的语言。html主要作用是建立网站网页的结构。
基础语法
标签/元素
<起始标签> 内容 </结束标签> ---双标签
<元素 /> ---单标签
html标签间可相互嵌套
在元素名后可添加属性（元素名与属性名之间一定要加空格，属性间也要加空格）
属性：给标签添加附加信息
属性名="属性值"
如：disabled="disabled" （属性名和属性值相同也可直接写成 disabled）
1.骨架
<!DOCTYPE html>
<!-- 文档声明 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 网页上面的标题 -->
</head>
<body>
我是一段文字
</body>
</html>2.标题标签
<!-- h1~h6 逐级减小 独占一行-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
</body>
</html>3.段落标签
<!-- 段落标签 <p> -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>
第一段
**********************************************************************************************************************
</p>
<p>
第二段
**********************************************************************************************************************************
</p>
</body>
</html>4.文本格式化标签
文本变粗：<strong> 文字 </strong>，<b> 文字 </b>
斜体标签：<em> 文字 </em>,<i> 文字 </i>
删除标签：<del> 文字 </del>,<s> 文字 </s>
上标标签：2<sub> 3 </sub>
下标标签：2<sup> 3 </sup>
下划线标签：<ins> 999 </ins>
5.换行标签及水平线标签
<!-- <br />换行 -->
<!-- <hr />水平线 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>欢迎加入前端</h3>
<hr />
Lorem ipsum dolor sit amet consectetur adipisicing elit<br />. Quos eaque natus asperiores labore perspiciatis
aperiam,
minima placeat sunt distinctio ad temporibus culpa nisi ex blanditiis quia quasi! Harum, esse quis!<br />
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iure veritatis accusantium fugit voluptatem suscipit sint
cum obcaecati libero itaque alias harum nihil autem expedita sapiente, id dicta aspernatur laudantium? Repellat.
Veritatis atque nam ut nesciunt deleniti et, voluptates deserunt ipsam quia necessitatibus alias, aliquam inventore,
co
</body>
</html>6.图片
<!--<img>图片-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="../图片.jpg" alt="图像不能显示时的替换文本。" title="鼠标指针悬停时显示的内容。" width="500px" border="20px" align="center">
<!-- align: left/right/
top/将图像的顶端和文本的第一行文字对齐，其他文字居图像下方
middle/将图像的水平中线和文本的第一行文字对齐，其他文字居图像下方。
bottom/将图像的底部和文本的第一行文字对齐，其他文字居图像下方。(默认) -->
</body>
</html>7.路径
相对路径:其他文件相对当前HTNL文件的位置(推荐使用)
../ 返回上一级
./ 当前级
/ 下一级
绝对路径:文件在电脑上的位置
网络位置:图片等在网络上的地址
8.视频
<!--<video>视频-->
视频和音频都需要controls属性才能正常播放 , loop循环播放 , autoplay muted 静音自动播放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<video src="../video.mp4" controls="controls" loop="loop" autoplay muted></video>
</body>
</html>9.音频
<!--<audio>音频-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<audio src="images/music.mp3" controls loop></audio>
</body>
</html>10.超链接
<!--<a>链接-->
href 链接跳转地址 , target 控制链接打开方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="./11-超链接2.html" target="_blank">点击我进行跳转</a>
</body>`
</html>11.锚链接
通过id进行跳转( # + id )
<!-- id 相当于身份证号 一个元素只能有一个id 同一网页内，id不能相同 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="#one">去h1那里</a>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus officiis quod, culpa aliquid soluta
</p>
<p>
<h1 id="one">
Quasi blanditiis ipsa aperiam quaerat excepturi deserunt, nisi mollitia exercitationem sint quas. Architecto tempora
nihil et eos deserunt inventore debitis, quibusdam quis a autem praesentium dolor, soluta, consequuntur atque
</p>
</body>
</html>12.特殊字符
13.有序列表
<!--<ol>有序列表--> 列表项前面会排序
type 列表项前的排序数字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
你喜欢的食物是：
<ol type="A">
<li>例1</li>
<li>例2</li>
<li>例3</li>
</ol>
</body>
</html>14.无序列表
<!--<ul>无序列表--> 列表项前无顺序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
你喜欢的食物是：
<ul type="square">
<li>例1</li>
<li>例2</li>
<li>例3</li>
</ul>
</body>
</html>15.自定义列表
<!--<dl>自定义列表--> 嵌套<dt> <dd>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<dl>
<dt>线下门店：</dt>
<dd>web之家</dd>
<dd>服务网点</dd>
</dl>
</body>
</html>16.框架---页面嵌套
<!--<iframe>页面嵌套--> frameborder 边框
可以与超链接的target属性配合使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<iframe href="https://www.taobao.com" frameborder="0" width="800px" height="400px"></iframe>
<a href="https://www.taobao.com" target="nn">点击我进入淘宝</a>
<iframe name="nn" frameborder="0" width="800px" height="400px"></iframe>
</body>
</html>17.单表
<!--<form>表单--> action数据提交处理的地方
单选项可以通过设置相同name属性使只能选择一个
value 没有时默认是写入的东西,在单选和多选时必须要有value
<button>提交按键
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="#">
<!-- placeholder 提示词 -->
用户名：<input type="text" name="userName" autocomplete="off" placeholder="请输入正确的用户名：">
密码：<input type="password" name="one" maxlength="6">
<br>
<input type="radio" name="r1" value="女" checked>女
<input type="radio" name="r1" value="男">男
<br>
爱好：
<input type="checkbox" name="love" value="sing" checked>唱歌
<input type="checkbox" name="love" value="dance">跳舞
<input type="checkbox" name="love" value="打豆豆">打豆豆
<!-- select:下拉选择框 ，option：选项 -->
<select name="xiala" id="" multiple>
<option value="西安">西安</option>
<option value="成都" selected>成都</option>
<option value="南京">南京</option>
</select>
<!-- textarea：文本输入框 ， maxlength 最大长度 -->
<textarea name="jianjie" id="" cols="30" rows="10" maxlength="20"></textarea>
<br>
<!-- input具有多种type，功能显示效果不同 -->
<input type="file" name="wenjian" id="" multiple>
<!-- <input type="button"> 普通按钮 -->
<input type="submit" value="tijaio">
<br>
<input type="email" name="number" id="">
<input type="date" name="" id="">
<input type="time" name="" id="">
<input type="color" name="" id="">
<button>提交</button>
</form>
</body>
</html>18.label标签---扩大可选择范围
1.用label将选项包含,通过label的for属性和input id扩大范围
2.用label将input和选项全部包含,但是不能有for属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="#">
<!-- 1、 -->
<label for="sing">爱唱歌</label><input type="checkbox" name="love" id="sing">
<!-- 2 -->
<label> 爱跳舞<input type="checkbox" name="love" id=""></label>
</form>
</body>
</html>19.表格标签
<!--<table>表格--> cellspacing 单元格与的单元格之间的间距
<caption>表格标题
<thead>表头 , <tbody>表格主体 ,<tfoot>表尾
<tr>行 , <th>每行列数,<td>表主体的单元格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1px" cellspacing="0" width="800px" height="500px">
<caption>学生信息</caption>
<thead height="200px" align="center" valign="middle">
<tr>
<th width="">姓名</th>
<th>性别</th>
<th>年龄</th>
<th>民族</th>
<th>政治面貌</th>
</tr>
</thead>
<tbody height="400px" align="center" valign="middle">
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
<td>翰</td>
<td>团员</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>21</td>
<td>汉</td>
<td>团员</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>18</td>
<td>翰</td>
<td>团员</td>
</tr>
<tr>
<td>赵六</td>
<td>男</td>
<td>18</td>
<td>翰</td>
<td>团员</td>
</tr>
</tbody>
<tfoot align="center">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>共计：4人</td>
</tr>
</tfoot>
</table>
</body>
</html>20.单元格合并
td rowspan 跨行合并,跨行需要把被合并<tr>里的对应<td>删掉
td colspan 跨列合并,跨行需要把本行<tr>里的被合并<td>删掉
21.无语义标签---布局
<div> 能放所有元素标签，独占一行
<span> 一行多个，给少部分标签加样式
22.元素显示
块元素：独占一行，宽、高、内外边距可以设置 <div h1~h6 li>等
行内元素：一行多个，宽高、内外边距设置无效 <span a>等
行内块元素：可以一行多个，还可以设置宽高，内外边距 <img>等
23.h5新标签
<header>：定义页面或者区域的头部。
<footer>：定义页面或者区域的底部。
<nav>：定义导航菜单。
<section>：用于定义一个区域，通常和`<article>`联合使用。
<article>：用于定义一篇文章或独立内容块。
<aside>：定义和页面内容相关的辅助信息，通常用于放置侧栏。
<canvas>：用于创造交互式绘画。
<details>:关于查看详情出现与隐藏的情况。
<summary>:标题。
24.全局属性
id；class；tabindex；title；spellcheck；autocapitalize；contenteditable；dir；hidden
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- id: 同一个页面id值不能重复 一个元素只能有一个id名
除了: body html head script style -->
<div id="box1"></div>
<a href="#" id="a1"></a>
<!-- class: 分类 配合层叠样式表
一个网页中可以有多个类名相同的元素，一个元素可以有多个类名 -->
<div class="box1 box2"></div>
<div class="box1 box3"></div>
<div class="box1 box4"></div>
<div class="box1 box5"></div>
<a href="#" class="a1"></a>
<!-- title ：鼠标悬停时，提示词-->
<img src="../图片.jpg" alt="" title="我是一个灰太狼">
<div title="你中奖了">我是盒子</div>
<a href="#" title="恭喜你">***8</a>
<!-- tabindex : 正数 负数 0 -->
<input type="text" name="ux" id="">
<a href="#"> dicdncd </a>
<div title="你中奖了" tabindex="1">我是盒子</div>
<div title="你中奖了" tabindex="2">我是盒子</div>
<!--spellcheck:拼写检查 true false -->
<input type="text" spellcheck="false">
<!-- accesskey：设置快捷键的属性 谷歌浏览器里：配合alt按键，才能完成 -->
<form action="#">
<input type="text" name="user" id="">
<button accesskey="l">提交</button>
</form>
<!-- autocapitalize 启动大小写-->
<!-- contenteditable：设置元素中内容是否可以更改 true false-->
<div contenteditable="true">我是一个不允许编辑的盒子</div>
<!-- dir -->
<div dir="rtl">我是一个不允许编辑的盒子</div>
<!-- hidden -->
<div hidden>我是一个不允许编辑的盒子cdcdcd</div>
</body>
</html>
1457
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
