-
HTML 由大量的标记/标签构成，分为：
-
双标记标签：
<head></head> -
单标记标签：
<br/>或<br>，两种写法都可以 -
完整的网页结构：
-
<!-- 表示当前文档是html5版本 让浏览器使用h5的规范解析 --> <!DOCTYPE html> <!--表示网页的开始与结束 lang="en"表示网页是一个英文网站 zh表示中文--> <html lang="en"> <!--网页头部,存放一些配置信息--> <head> <meta charset="UTF-8"> <!--配置编码,为了认识中文--> <title>我是网页标题</title> <!-- 配置网页的标题 --> </head> <body> <!--网页展示的内容--> 第一个网页的内容 </body> </html>
HTML属性
属性：也称为特征，描述标签某一方面的特点
html 有很多的属性和值，用来修改元素的样式和状态
写法：<标签 属性名 1="属性值 1" 属性名 2="属性值 2"></标签>
要求：
-
属性的声明必须在开始标记里
-
一个元素可能不只有一个属性，多个属性之间使用空格隔开
-
多个属性之间不区分先后顺序
-
属性名与属性值之间使用等号连接
-
属性值要包裹在双引号中
-
单值属性：只有一个与属性名同名值，值可以省略不写
比如 readonly 只读 disabled禁用
-
注释
-
用来解释代码且不会执行的文本
-
注释格式：
<!-- 被注释掉的内容 --> -
快捷键： Ctrl+/ 添加注释，再按一次取消注释
-
注释不能嵌套注释，也不可以写在标签里！
-
文本相关标签
-
<b>加粗文字</b>
-
<i>斜体文字</i>
-
<u>下划线文字</u>
-
<s>删除线文字</s>
-
<hn>n级标题</hn>n为1到 6 独占一行，字体加粗，有垂直行间距
-
<p>段落</p> 独占一行，有垂直行间距
-
<hr>独占一行的灰色水平分割线
-
空格折叠现象：连续的多个空格或换行会折叠成一个空格显示，使用<br>换行
转义字符: <小于号 >大于号 空格
生成假文：输入 lorem 按 Tab 补全即可
-
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本处理</title> </head> <body> <!-- 1.文本标签 --> 普通文字 <b>加粗文字</b> <s>删除线文字</s> <i>斜体文字</i> <u>下划线文字</u> <mark>高亮 标记文字</mark> <!--换行标签--> <br> <!--<转义符号,在页面显示一个小于号 less than >转义符号,在页面显示一个大于号greater than--> 我最喜欢<tom>写的静夜思 <!--2.标题字--> <!--h1~h6 h4的字号和普通文字一样大--> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> <h7>七级</h7> <!-- 3.段落标签 --> <p>吃葡萄不吐葡萄皮</p> <p>吃葡萄不吐葡萄皮</p> <p>吃葡萄不吐葡萄皮</p> <!--生成假文 先写lorem 再按Tab补全--> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad assumenda at corporis dolore eum in inventore nobis numquam, obcaecati quaerat quis quo ratione saepe sint tempora unde, velit voluptate voluptates?</p> <!-- 生成一条水平的灰色分割线 --> <hr> <!-- 4.有序列表 ordered list 里面每一条数据称作:列表项 list item--> <!--type属性默认1阿拉伯数字 A大写字母 a小写字母 I大写罗马数字 i小写罗马数字--> <ol type="i"> <li>把冰箱门打开</li> <li>把大象塞进去</li> <li>把冰箱门关上</li> </ol> <!-- 5.无序列表ul(unordered list) 列表项还是li(list item)--> <!-- type="none"去掉无序列表项前的标识符(黑色实心圆) --> <ul type="none"> <li>《Think in Java》</li> <li>《Java从入门到精通》</li> <li>《颈椎康复指南》</li> </ul> <hr> </body> </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<ul type="none">
<li>
热菜
<ol>
<li>西红柿牛腩</li>
<li>水煮肉片</li>
<li>宫保鸡丁</li>
<li>溜肉段</li>
</ol>
</li>
<li>
凉菜
<ol>
<li>拍黄瓜</li>
<li>皮蛋豆腐</li>
<li>凉拌三丝</li>
</ol>
</li>
<li>
主食
<ol>
<li>米饭</li>
<li>馒头</li>
</ol>
</li>
</ul>
<h1>个人简历</h1>
<h3>基本信息</h3>
<p>姓名:<b>传奇哥</b></p>
<p>性别:男</p>
<p>爱好:<s>摄影</s></p>
<h3>个人经历</h3>
<ul>
<li>小学9年</li>
<li>中学9年</li>
<li>高中12年</li>
</ul>
<h3>获得荣誉</h3>
<ol>
<li>机甲收集达人</li>
<li>玩偶收集达人</li>
</ol>
</body>
</html>-
分区元素
分区标签：可以理解为一个区域，对多个具有相同或相似结构的标签进行统一管理
-
<div></div>块级分区 -
<span></span>行内分区 -
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>分区元素</title> </head> <body> <!-- 行内分区元素 span不会换行 用来选中一行中的一部分 --> 最近的天气很<span style="color:red;">热</span> 但今晚有<span style="color:blue;">暴雨</span>预警 <!-- 块级分区元素 独占一行 宽度为父级宽度的100% 高度为0靠内容撑起来 --> <div></div> <div>我是内容</div> </body> </html>HTML5 新增了一些带有语义的分区标签
-
<header></header>定义网页或一个区域的头部 -
<nav></nav>定义网页的导航部分 -
<main></main>定义网页的主要内容 -
<section></section>定义网页的一个区块或章节 -
<article></article>定义网页中独立完整的内容，比如博客文章或新闻报道 -
<aside></aside>定义网页的侧边栏或者附属信息 -
<footer></footer>定义网页或一个区域的页脚部分 -
<hr>
<!-- 目前div的使用频率较高 -->
<div class="header">顶部条</div>
<div class="nav">导航栏</div>
<div class="aside">侧边栏</div>
<div class="main">主体</div>
<div class="article">文章</div>
<div class="footer">尾部</div>
<hr>
<!-- h5新增的一些带有语义的分区标签 -->
<header>头部</header>
<nav>导航栏</nav>
<main>主体</main>
<article>文章</article>
<section>区域</section>
<aside>侧边栏</aside>
<footer>页脚</footer>
-
URL 路径
URL（Uniform Resource Locator）统一资源定位符，俗称路径，用来标识资源的位置
-
相对路径
-
从当前 html 文件的位置出发去找资源
-
如果 html 与资源在同一个目录下，直接写资源的名字，如：1.png
-
如果资源在 html 的下一级目录，先写目录名再写目录里的资源，如：img/2.png
-
如果资源在 html 的上一级目录，先回到上一级再找资源，如： ../3.png
-
绝对路径
从根目录处开始找资源，不需要当前文件的位置
-
优点：节省本地服务器的存储空间
-
缺点：资源不稳定 如果远程服务器删除此资源，本地服务器就引用不到了,且并不安全
-
网络资源：从协议开始，如： https://cdn.tmooc.cn/bsfile//courseImg///f044221ee737404e91584a4d083764bd.png
-
图片插入
img标签用来向页面插入图片
-
src 表示资源的路径
-
alt 表示图片无法显示时的替代文本
-
title 鼠标悬停时显示的描述文本
-
图片本身有大小，修改图片宽高时要注意图片本身的宽高比 如果设置的宽高不符合图片本身的宽高比，图片会变形--图片比例失真
-
解决方案：宽或者高只设置一个，另外一个会自动随之更改
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片插入</title> </head> <body> <!-- 从当前文件出发去找资源: 1)图片与文件在同一个文件夹,直接写图片的全名 2)图片在文件的下一级文件夹,先写文件夹名,再写文件夹下的图片全名 3)图片在文件的上一级文件夹,先写../回到上一级,再写图片全名 --> <!-- alt图片不能正常显示时替换的文字 --> <!-- title表示鼠标悬停在图片上显示的描述文字 --> <img src="2.png" alt=""> <img src="img/1.jpg" alt=""> <img src="../3.png" alt="" title="我是一张五常大米的图片"> <img src="../3.pg" alt="哎呀,图片走丢了"> <!-- 使用绝对路径 --> <!-- 如果远程服务器的资源删除，绝对路径就引用不到图片资源了 --> <img src="https://cdn.tmooc.cn/bsfile//courseImg///5f791c0985cc4a67a5c4dca6627155b0.jpg" alt=""> <!-- width设置图片宽度 height设置图片高度 只要设置一个,另外一个会跟着改,如果两个一起设置,注意图片的原始比例防止图片失真--> <img src="img/zly.jpg" width="300px" height="300px" alt=""> </body> </html>
<table></table> 表示整个表格 包含表格的全部内容
<tr></tr> 表示表格中的一行 table row
<td></td> 表示表格中的一个单元格 table datacell
单元格是真正存放数据的地方，一行有几个单元格，表示一行有几列
<caption></caption> 表格的标题
<th></th> 行/列的标题 文字加粗居中显示
表格属性：
border=“1px” 给表格添加边框
style="border-collapse: collapse;" 表格默认的边框是带有间距的，想去掉可以加这句代码
合并单元格：写在 td 里，被合并的单元格一定得删掉！
colspan="n"跨列 从当前单元格开始，向右合并 n 个单元格（n 也包含当前单元格）
rowspan="n"跨行 从当前单元格开始，向下合并 n 个单元格（n 也包含当前单元格）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格练习</title>
</head>
<body>
<table border="1px">
<caption>讲师信息表</caption>
<tr>
<th>序号</th>
<th>讲师</th>
<th>课程</th>
</tr>
<tr>
<td>1</td>
<td>传奇</td>
<td>数据库</td>
</tr>
<tr>
<td>2</td>
<td>硕博</td>
<td>SRE</td>
</tr>
<tr>
<td>3</td>
<td>强哥</td>
<td>微服务</td>
</tr>
</table>
<table border="1px">
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
</tr>
<tr>
<!-- colspan="n"跨列，横着合并，从当前单元格开始向右合并n个单元格 -->
<!-- rowspan="n"跨行，竖着合并，从当前单元格开始向下合并n个单元格 -->
<!-- 被合并的单元格一定得删掉!!! -->
<td colspan="2">2-1</td>
<!-- <td>2-2</td>-->
<td>2-3</td>
<td rowspan="3">2-4</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
<!-- <td>3-4</td>-->
</tr>
<tr>
<td>4-1</td>
<td>4-2</td>
<td>4-3</td>
<!-- <td>4-4</td>-->
</tr>
</table>
<hr>
<table border="1px" style="border-collapse: collapse;">
<caption>购物车</caption>
<tr>
<th>商品编号</th>
<th>商品名称</th>
<th>商品价格</th>
</tr>
<tr>
<td>1</td>
<td>小米Air</td>
<td>5877</td>
</tr>
<tr>
<td>2</td>
<td>华为遥遥遥遥遥遥领先</td>
<td>5877</td>
</tr>
<tr>
<td>总价:</td>
<td colspan="2">10000</td>
</tr>
</table>
</body>
</html>-
超链接练习
a 标签用于向页面插入超链接
-
href 表示要链接的资源路径
-
超链接可以链接网络与内部资源，还可以链接图片
-
通过 a 标签包裹 img 标签可以实现图片超链接
-
锚点：先给对应的 html 内容添加 id，再通过#id 值选中，即可跳转到锚点位置，#表示直接跳转到页面顶部
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>超链接</title> </head> <body> <!-- 跳转到本地资源 --> <a href="p2_文本处理.html">跳转到今日的第2个页面</a> <a href="p4_图片插入.html">跳转到今日的第4个页面</a> <!-- 跳转到外部资源 --> <a href="https://www.baidu.com/">百度首页</a> <a href="https://www.tmooc.cn/">TMOOC首页</a> <!-- 跳转至本地的图片资源 --> <a href="2.png">即将打开一张图片</a> <!-- 图片链接 --> <a href="https://www.baidu.com/"> <img src="2.png" alt="" width="300px"> </a> <hr> <!-- _blank打开一个空白页 _self刷新当前页面 --> <a href="https://www.baidu.com/" target="_blank">百度1</a> <a href="https://www.baidu.com/" target="_self">百度2</a> <hr> <!--锚点 书签--> <h1>西游记</h1> <a href="#c1">快速跳转至第1章</a> <a href="#c2">快速跳转至第2章</a> <a href="#c3">快速跳转至第3章</a> <hr> <h3 id="c1">第一章 石猴出世</h3><!--p*30>lorem--> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid beatae distinctio dolorem doloremque earum error fugit in ipsum itaque laboriosam libero modi molestias necessitatibus, nulla quibusdam quos similique veritatis vero.</p> <h3 id="c2">第二章 蓬莱学艺</h3><!--p*30>lorem--> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid beatae distinctio dolorem doloremque earum error fugit in ipsum itaque laboriosam libero modi molestias necessitatibus, nulla quibusdam quos similique veritatis vero.</p> <h3 id="c3">第三章 龙宫借宝</h3><!--p*30>lorem--> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid beatae distinctio dolorem doloremque earum error fugit in ipsum itaque laboriosam libero modi molestias necessitatibus, nulla quibusdam quos similique veritatis vero.</p> <a href="#">快速跳转至页面顶部</a> </body> </html> -
表单
-
action="url" 向哪个地址提交数据，如果不写会提交给当前页面，也可以写一个#号占位
-
type 控件类型
-
name 控件名
-
value 可以设置输入框的默认值，如果是按钮，则设置的是按钮上显示的文本
-
placeholder 提示占位文本
-
maxlength 设置输入的最大长度
-
readonly 设置文本控件只读，能看不能改，数据可以提交
-
disabled 设置控件为禁用(控件变为灰色的了,且数据不可以提交)
-
checked 单/多选框使用此属性可以设置指定选项被默认选中
-
表单提供了一些可视化的输入控件，会自动收集整理用户输入的内容，并提交给服务器
<form></form> 表示表单的开始与结束
属性：
<input type="text"> 文本输入框 <input type="password"> 密码框 <input type="submit" value="提交按钮"> <input type="reset" value="重置按钮"> <input type="button" value="普通按钮"> <button>h5新增的按钮</button> <input type="radio"> 单选框 注意设置name与value属性！ <input type="checkbox">多选框 注意设置name与value属性！ <input type="date">日期 <input type="file">文件 <input type="color">颜色 <input type="range">范围
按钮的另外一种写法：
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>下拉选框： selected 可以设置默认选中
<select name="city">
<option value="1" selected>北京</option>
<option value="2">上海</option>
</select>label 关联控件：用于 form 中文本和控件的关联，单击文本如同单击控件
<input type="checkbox" id="agree">
<label for="agree">我同意相关的服务协议</label>
多行文本域：用于输入多行文本内容，常用于留言板意见栏等
-
resize: none; 不允许拖拽修改多行文本域的大小
-
rows 设置行数(高度) cols设置列数(宽度)但这两个属性不推荐后期可以用CSS做
<textarea style="resize: none;" rows="4" cols="50"></textarea><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<a href="https://www.baidu.com">打开百度</a>
<!--form表单 表单的所有控件都需要写到form中
action提交到哪,点提交按钮会自动触发提交
# 占位符号 表示默认提交到本页 -->
<form action="#">
<!--input控件
type设置控件类型=>text普通文本输入框 password密码输入框-->
<!--name控件名称 placeholder提示占位文本 value控件的值或按钮上的显示文字
maxlength最大输入长度 readonly只读-->
用户名:<input type="text" name="username" placeholder="请输入用户名"> <br>
昵称:<input type="text" name="nickname" value="达拉崩吧" readonly> <br>
密码:<input type="password" name="pwd" value="123" maxlength="6"> <br>
<!-- radio单选 checkbox多选
多个选项必须设置成同一个name属性分到同一个组里!
还必须给每个选项设置value,也就是这个选项的值,否则提交的值是on
checked 设置当前选项默认选中 -->
性别:
<input type="radio" name="gender" value="1" checked>男
<input type="radio" name="gender" value="0">女
<br>
爱好:
<input type="checkbox" name="like" value="ks">看书
<input type="checkbox" name="like" value="dy">电影
<input type="checkbox" name="like" value="yy" checked>游泳
<input type="checkbox" name="like" value="yx">游戏
<br>
文件:<input type="file" name="file"> <br>
生日:<input type="date" name="birthday">
<br>
幸运色:<input type="color"> <br>
缩放:<input type="range"> <br>
留言板:<textarea style="resize: none;"></textarea>
<input type="checkbox" id="agree">
<label for="agree">我同意以上协议</label>
<hr>
<!-- select下拉选择框 option选项 -->
喜欢的城市:<select name="city">
<option value="cd">成都</option>
<option value="heb">哈尔滨</option>
<option value="nj">南京</option>
<option value="zz" selected>郑州</option>
</select>
<hr>
<!-- submit提交按钮 reset重置按钮,注意不是清空! button普通按钮,后期结合JS使用 -->
<input type="submit" value="点我提交">
<input type="reset" value="点我重置">
<input type="button" value="普通按钮">
<button>我是按钮</button>
</form>
</body>
</html>必须掌握!
value加在输入框上,是设置什么?设置显示的默认值,用户输入的值也保存在value属性中
value加在按钮上,是设置什么?设置按钮上显示的文字
value加在单选/多选/下拉选框选项上,是设置什么? 设置选中当前选项时提交的值
只读属性是什么?readonly单值属性 只允许看,不允许编辑
怎么设置单选/多选选项的默认选中? checked单值属性
怎么设置下拉选框选项的默认选中? selected单值属性
写单选时,必须要写的两个属性是什么? name将所有选项分到同一组 value不然提交的是on
-
音视频插入
-
src= "插入资源的路径"
-
controls 显示播放控件 单值属性
-
muted 设置静音，必须设置静音才能自动播放 单值属性
-
autoplay 自动播放 单值属性
-
loop 循环播放 单值属性
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>音频视频插入</title> </head> <body> <!--音频插入--> <audio src="img/bird.mp3" controls></audio> <!--视频插入--> <video src="img/wdsj.mp4" style="width:500px;" controls muted autoplay loop></video> </body> </html> -
今日拓展
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
