HTML基本骨架:
html:整个网页
head:网页头部,存放浏览器看的代码,例如css
body:网页主体,存放给用户看的代码,例如:图片。文字
title:网页标题
<html>
<head>
<title>网页标题</title>
</head>
<body>
网页主体
</body>
</html>
标签分为兄弟跟父子关系:
(1)<head></head>
<body></body>为兄弟关系
(2)<html></html>
<body></body>为父子关系
----------<br>代表换行---单标签
----------<hr>下划线
----------ctrl+/为注释(注意不是除线是字母区的斜线)
-----------Tab:向后
-----------shift Tab:向前
标题标签:
<h1>第一标题</h1>
<h2>第二标题</h2>
<h3>第三标题</h3>
<h4>第四标题</h4>
<h5>第五标题</h5>
<h6>第六标题</h6>
(1)h1标签在一个网页中只能用一次,用来放新闻标题或者网页的logo
(2)h2-h6没有使用次数限制
段落标签:
<p></p>
1.独占一行
2.段落之间存在空隙
文本格式化标签:
常见的有加粗,倾斜,下划线,删除线(均为双标签)
加粗:<string>或者<b>
倾斜:<em>或者<i>
下划线:<ins>或者<u>
删除线:<de|>或者<s>
<strong>strong 加粗</strong>
<b>b 加粗</b>
<br>
<em>em 倾斜</em>
<i>i 倾斜</i>
<br>
<ins>ins 下划线</ins>
<u>u 下划线</u>
<br>
<del>del 删除线</del>
<s>s 删除线</s>
图像标签:
在网页中插入图片
<img src="1.jpg" alt="替换文本" title="提示文本">(单标签)
src用于指定图片的位置和名称,是<img>的必须属性
(属性):
(1)(重要)alt:替换文本(图片无法显示的时候显示的文本)
(2)(重要)title:提示文本(鼠标悬停在图片上面的时候显示的文字)
(3)width:图片的宽度(值为数字,没有单位)
(4)height:图片的高度(值为数字,没有单位)
alt是为了防止网速慢图片加载不出来的情况无法被察觉。
title是鼠标悬停在图片上所显示的提示信息
<img src="2.jpg" width="100" height="100">
浏览器缩放图片默认是等比例缩放。
路径:
(1)相对路径:从当前文件位置出发找文件
1. /表示进入某个文件架里面
2. .表示当前文件所在文件夹
3. ..表示当前文件的上一级文件夹
(2)绝对路径:从盘符出发查找目标文件
应用场景:友情链接(超链接)
超链接:
点击跳转到其他页面
标签:<a href=""></a>
<a href="https://www.mihoyo.com/">米哈游</a>
<!-- 跳转到本地文件,相对路径查找 -->
<a href="./day1.html">跳转到day1页面</a>
---------<a href="./day1.html" target="_blank">跳转到day1页面</a> target="_blank":打开新窗口
herf写#为空不会跳转
音频标签:
<audio src=""></audio>
属性:
(1)src(音频URL,mp3,Ogg,Wav)
(2)controls(显示音频控制面板)
(3)loop(循环播放)
(4)autoplay(自动播放)
在html5中,如果属性名和属性值完全一样,可以简写为一个单词,例如:<controls>与<controls="controls">
视频标签:
属性:
(1)src(视频URL,mp4,WebM,Ogg)
(2)controls(显示视频控制面板)
(3)loop(循环播放)
(4)muted(静音播放)
(5)autoplay(自动播放)注意要在静音下才可以自动播放
网页制作思路:从上到下,先整体再局部,逐步分析制作
分析内容->写代码->保存->刷新浏览器,看效果
列表:布局内容排列整齐的区域
列表分为无序列表(无序号),有序列表(有序号),定义列表()三种
(1)无序列表
标签ul嵌套li,ul是无序列表,li是列表条目,li标签独占一行,li里面可以放任何内容
<ul>
<li>第一</li>
<li>第二</li>
<li>第三</li>
<li>第四</li>
</ul>
(2)有序列表:
ol嵌套li,ol是有序列表,li是列表条目,li标签独占一行,li里面可以放任何内容
<ol>
<li>高数</li>
<li>线代</li>
<li>概率论</li>
</ol>
(3)定义列表:
一般用在网页底部,类似帮助中心,一个标题对应多个内容
dl嵌套dt,dd,dt是定义列表的标题,dd是定义列表的描述/详细
dl里面只能包含dt和dd,dt和dd里面可以包含任何内容
<dl>
<dt>服务中心</dt>
<dd>申请售后</dd>
<dd>售后政策</dd>
</dl>
表格:
table嵌套tr,tr嵌套td/th
table代表表格
tr代表行
th代表表头单元格
td代表内容单元格
注意:在网页中,表格默认没有边框线,使用border属性可以为表格添加边框线。
表格结构标签:用表格标签把内容划分区域,让表格结构更清晰,语义更清晰。
标签名:
(1)thead:表格头部。表格头部内容
(2)tbody:表格主体。主要内容区域
(3)tfoot:表格底部。汇总信息区域
合并单元格:将多个单元格合并成一个单元格,以合并同类信息
1.明确目标
2.保留最左最上的单元格,添加属性(取值是数字,表示需要合并的单元格数量)
(1)跨行合并,保留最上单元格,添加属性rowspan
(2)跨列合并,保留最左单元格,添加属性colspan
3.删除其他单元格
注意:不能跨结构标签合并
表单:收集用户信息(主要有登录,注册,搜索)
<input type="" >
input标签type属性值不同,功能不同
text:文本
password:密码
radio:单选
checkbox:多选
file:上传文件
input标签占位文本,提示信息,使用placeholder添加提示文字
<input type="password" placeholder="请输入密码">
单选框radio:name属性对控件分组,checked为初始默认属性值(属性名与属性值相同,省略)
单选框 1:<input type="radio" name="1" checked>
<br>
单选框 2:<input type="radio" name="1">
上传文件:实现多文件上传,添加属性multiple
多文件:<input type="file" multiple>
多选框默认选中:checked
多选框:<input type="checkbox" checked>
下拉菜单:select嵌套option,select是下拉菜单整体,option是下拉菜单每一项,selected属相为默认选中
<select name="" id="">
<option value="">北京</option>
<option value="">上海</option>
<option value="">广州</option>
<option value="">深圳</option>
<option value="" selected>武汉</option>
</select>
文本域:多行输入文本的表单控件。
<!-- 右下角有推拽功能,未来都会禁用 -->
<textarea name="" id="" cols="" rows="" placeholder="请输入文本"></textarea>
label:网页中某个标签的说明文本,用label标签绑定文字和表单控件的关系,增大表单控件的点击范围。
写法一:
(1)label标签只包裹内容,不包裹表单控件
(2)设置label标签的for属性值和表单控件的id属性值相同
<input type="radio" name="" id="man">
<label for="man">男</label>
姓别:
<input type="radio" name="gee" id="1" checked> <label for="1">男</label>
<input type="radio" name="gee" id="2"> <label for="2">女</label>
写法二:使用label标签包裹文字和表单控件,不需要属性
<input type="radio" name="gee" id="1" checked> <label for="1">男</label>
<label>
<input type="radio" name="gee">女
</label>
按钮:button
submit:提交按钮,点击可提交后台
reset:重置按钮,点击恢复默认值
button:普通按钮(配合JavaScript使用)
<!-- from 表单区域需要from管理 -->
<!-- action="" 发送数据的地址 -->
<form action="">
用户名:<input type="text">
<br><br>
密码:<input type="password">
<br><br>
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">普通</button>
</form>
无语义的布局标签:布局网页
div:独占一行
span:不换行
字符实体:在网页中显示预留字符
在代码中敲键盘的空格,网页只识别一个
空格: ;
小于号:<;
大于号:>;