HTML基础知识
标题
标题标签:独占一行
双标签
/*
<h1> ...</h1>
h1 ...h6一共六级标签
标题独占一行
*/
段落
段落标签:独占一行
双标签
/*
<p> </p>
多个段落之间默认有一个间隙,就是隔了一行
段落独占一行
*/
换行,水平分割线
# 查看的时候一行文字很长,可以在"查看"中设置 自动换行
# 单标签
<br>
<hr> 水平分割线
文本格式标签
场景:需要让文字加粗、下划线、倾斜,删除线等效果
标签 | 说明 | 标签 | 说明 | |
---|---|---|---|---|
b | 加粗 | strong | 加粗 | |
u | 下划线 | ins | 下划线 | |
i | 倾斜 | em | 倾斜 | |
s | 删除线 | del | 删除线 |
图片标签
单标签,标签名称:img
/*
属性名
src:图片地址
alt:图片加载不出来时,展示的内容
title:光标悬浮到图片上时,显示的内容
其中title属性不仅可以用到img标签,也可以作为其它标签的属性
<img src="" alt="" title=""> # 属性之间用空格隔开,属性之间没有顺序之分
*/
图片标签的width和height属性
/*
属性名:width和height
属性值:宽度和高度(数字px)
注意点:
如果只设置width或height中的一个,另一个没设置的会自动等比例缩放(此时图片不会变形)
如果同时设置了width和height两个,若设置不当此时图片可能会变形
*/
音频标签
场景:在页面中插入音频
音频标签目前仅支持:MP3、Wav、Ogg
/*
<audio src="" controls> </audio>
src:音频的路径
controls:显示播放的控件(浏览器默认是显示播放控件的)
atuoplay:自动播放(有些浏览器不支持)
loop:循环播放
*/
视频标签
视频标签目前仅支持:MP4、WebM、Ogg
/*
<video src="" controls></video>
src:视频路径
autopaly:自动播放,谷歌浏览器需配合meted实现静音播放
*/
超链接(a标签)
/*
<a href="" target=""></a>
开发过程中,还不确定href要跳转的地址,先用#号(空连接)占位
target属性:控制跳转连接页面在浏览器是另打开一个新的的标签页,还是覆盖原来的
*/
target取值 | 效果 |
---|---|
_self | 默认值,在当前窗口跳转(覆盖原网页) |
_blank | 在新窗口跳转(保留原网页) |
列表标签
无序列表
父子标签
ul标签中,只能包含li标签中,不能包含其它的,可以在li中使用其它标签
标签名 | 说明 |
---|---|
ul | 表示无序列表的整体,用于包裹li标签 |
li | 表示无序列表的每一项,用于包含每一行的内容 |
无序列表的显示特点
/*
列表的每一项前默认显示圆点标识
*/
有序列表
父子标签
场景:在网页中表示一组有顺序之分的列表,如:排行榜
标签名 | 说明 |
---|---|
ol | 表示有序列表的整体,用于包裹li标签 |
li | 表示有序列表的每一项,用于包含每一行的内容 |
自定义列表
/*
场景:在网页的底部导航中通常会使用自定义列表实现
如:
帮助中心
账户管理
购物指南
订单操作
*/
标签名 | 说明 |
---|---|
dl | 表示自定义列表的整体,用于包裹dt/dd标签 |
dt | 表示自定义列表的主题 |
dd | 表示自定义列表的针对主题的每一项内容 |
自定义列表显示特点
/*
dd当前会默认显示缩进效果
注:dl标签中,只能包含dt和dd标签
dt和dd标签可以包含任意内容
*/
<body>
<dl>
<dt>帮助中心</dt>
<dd>账户管理</dd>
<dd>购物指南</dd>
<dd>订单操作</dd>
</dl>
</body>
表格标签
不设置border属性的话,浏览器不显示表格,只会显示表格内容
标签名 | 说明 |
---|---|
table | 表格整体,可用于包裹多个tr |
tr(table_rows) | 表格每行,可用于包裹td |
td | 表格单元格,可用于包裹内容 |
标签的嵌套关系:table > tr > td |
表格相关属性
实际开发中,都是使用css改变样式的
属性名 | 属性值 | 效果 |
---|---|---|
border | 数字,通常是1 | 边框宽度 |
width | 数字 | 表格宽度 |
height | 数字 | 表格高度 |
表格标题和表头单元格标签
场景:在表格中表示整体大标题和一列小标题
标签名 | 名称 | 说明 |
---|---|---|
caption | 表格大标题 | 表示表格整体大标题,默认在表格整体顶部居中位置显示 |
th | 表头 |
/*
注意点:
caption标签书写在table标签内部
th标签书写在tr标签内部(用于替换td标签)
*/
合并单元格
/*
合并单元格步骤
1.通过左上原则,确定保留谁删除谁
上下合并-->只保留最上的,删除其它
左右合并-->只保留最左的,删除其它
2.注意点:
只有同一个结构标签中的单元格才能合并,不能跨结构标签合并
*/
属性名 | 属性值 | 说明 |
---|---|---|
rowspan | 合并单元格的个数 | 跨行合并,将多行的单元格垂直合并 |
colspan | 合并单元格的个数 | 跨列合并,将多列的单元格水平合并 |
表格案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>制作网页</title>
</head>
<body>
<table border="1">
<caption>
<strong>优秀学生信息表</strong>
</caption>
<tr>
<th>年级</th>
<th>姓名</th>
<th>学号</th>
<th>班级</th>
</tr>
<tr>
<td rowspan="2">高三</td>
<td>张二</td>
<td>110</td>
<td>三年二班</td>
</tr>
<tr>
<!-- 合并时候,这个不能写 -->
<!-- <td>高三</td> -->
<td>赵四</td>
<td>120</td>
<td>三年三班</td>
</tr>
</table>
</body>
</html>
表单标签
应用场景,登录、注册、搜索时使用
表单标签:input、button、select、textarea、lable
input基本使用
input是一个单标签,表单当中的一种
input标签,默认是不换行,要用br标签换行
input标签可以通过type属性值的不同,展示不同效果
标签名 | type属性值 | 说明 |
---|---|---|
input | text | 文本框,用于输入单行文本 |
input | password | 密码框 |
input | radio | 单选框 |
input | checkbox | 多选框 |
input | file | 文件上传 |
input | submit | 提交按钮 |
input | reset | 重置按钮 |
input | button | 普通按钮,默认无功能,通常配合js添加功能 |
输入框提示符(表单占位符)
即:输入框底部说明文字
<body>
<input type="text" placeholder="">
</body>
单选功能和默认选中
name进行分组,才可以实现
属性名 | 说明 |
---|---|
name | 分组,有相同name属性的单选框为一组,一组中同时只能有一个被选中 |
checked | 默认选中 |
<body>
男:<input type="radio" name="sex">
女:<input type="radio" name="sex" checked id="">
</body>
选择多个文件
默认只能选择一个文件,用multiple属性可选择多个文件
上传文件时,过滤文件类型
点击上传按钮,调起windows时,调起文件选择框时,直接过滤文件类型
属性名称:accept
# 使用属性accept指定文件类型,若过滤多个文件类型用逗号隔开
input type="file" multiple accept=".csv, .txt">
按钮(给按钮指定名称,value属性)
提交和重置,以及普通按钮,要想实现,必须要在表单域标签下,即:form标签
即:用form标签把标签表单标签一起包裹起来
表单域标签的,action属性,即要提交到哪里(地址)
button按钮标签
以后直接用这个标签的情况比较多
button按钮可单独作为标签出现,就不用加在input里面了
按钮名称,直接写到
<button type=""> 按钮的名称</button>
# button是双标签,便于包裹其它内容:文字,图片等
下拉菜单标签select
select 标签和option是父子标签
下拉菜单,默认选中第一个option,可以通过selected更改默认选中
/*
标签所组成
select标签:下拉菜单的整体
option标签:下拉菜单的每一项
常见属性
selected:下拉菜单默认选中
*/
<body>
所选城市:
<select name="" id="">
<option value="">上海</option>
<option value="" selected>杭州</option>
<option value="">深圳</option>
</select>
</body>
小总结
# 表单标签里面有两种默认选中,单选,多选 是使用checked进行默认选中的
# 下拉菜单的默认选中,selected
文本域(textarea)标签
不用记cols,rows这两个属性,后面都是用css来进行设置的
场景:在网页中提供可输入多行文本的表单控件,如:描述输入框
/*
常见属性
cols:规定了文本域内可见宽度
rows:规定了文本域内可见行数
注意点:
右下角可以拖拽改变大小
实际可发中,使用css样式设置
*/
label标签(扩大可点击区域)
扩大可点击区域范围
例:性别单选项,分别点击男/女文字也可以选中
使用方法一
<!--
1.使用label标签把内容(如:文本)包裹起来
2.在表单标签上添加id属性
3.在label标签的for属性中设置对应的id属性值
代码示例-->
<input type="radio" name="sex" id="nan" checked> <label for="nan">男 </label>
使用方法二
<!--
使用方法二:
1.直接使用label标签把内容(如:文本)和表单标签一起包裹起来
2.然后把label标签的for属性删除即可
代码示例 -->
<label><input type="radio" name="sex">女</label>
语义化标签(div,span)
网页布局
div 和span是用来做网页布局的
div标签:一行只显示一个(独占一行)
span标签:一行可以显示多个
空格表示
再网页中展示空格,用
 
HTML基础知识汇总案例
实际工作中,以上都放在form表单标签里面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>制作网页</title>
</head>
<body>
<form action="">
<h1>青春不常在,抓紧谈恋爱</h1>
<hr>
昵称:<input type="text" placeholder="请输入昵称">
<br>
<br>
性别:<input type="radio" name="sex" id="nan" checked> <label for="nan">男 </label>
<!-- <input type="radio" name="sex" id="nv"> <label for="nv">女</label> -->
<!--两种增加可点击区域-->
<label><input type="radio" name="sex">女</label>
<br>
<br>
所在城市:
<select name="" id="">
<option>上海</option>
<option selected>杭州</option>
<option>项城</option>
</select>
<br>
<br>
婚姻情况:
<input type="radio" name="marriage" id="weihun"><label for="weihun">未婚</label>
<input type="radio" name="marriage" id="yihun"><label for="yihun">已婚</label>
<input type="radio" name="marriage" id="baomi"><label for="baomi">保密</label>
<br>
<br>
喜欢的类型:
<input type="checkbox" name="" id="keai"> <label for="keai">可爱</label>
<input type="checkbox" name="" id="xinggan"> <label for="xinggan">性感</label>
<input type="checkbox" name="" id="yujie"> <label for="yujie">御姐</label>
<br>
<br>
个人介绍:<br>
<textarea name="" id="" cols="30" rows="10" placeholder="请输入个人介绍..."></textarea>
<h2>我承诺</h2>
<ul>
<li>年满18岁、单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
<input type="checkbox" id="tiaoyue"> <label for="tiaoyue">我同意所有条款</label>
<br>
<!-- <button type="submit">免费注册</button> -->
<!-- 直接写button也行,如果写input的话,按钮名字,用value属性去接收 -->
<input type="submit" value="免费注册">
<button type="reset">重置</button>
</form>
</body>
</html>
标签:表格,标签,知识,默认,表单,HTML,input,属性
From: https://www.cnblogs.com/xiaomengniu/p/16963534.html