HTML
程序员文章站
2022-04-29 11:01:03
...
HTML
1. 网页的基本标签：
1. 标题标签：
<!-- 标题标签-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
2. 段落标签：
<!-- 段落标签-->
<p>hah</p>
<p>heh</p>
3. 换行标签：
<!--换行标签-->
hah<br/>
heh<br/>
4. 水平线标签：
<!--水平线标签-->
<hr/>
5. 粗体和斜体：
<!--粗体-->
<b>hah</b> <!--为了加粗而加粗-->
<strong>hah</strong><!--为了标明重点而加粗-->
<!--斜体-->
<em>heh</em>
6. 特殊符号：
<!--特殊符号-->
<!--空格-->
小 马
<!--大于号-->
>
<!--小于号-->
<
<!--版权符号-->
©
2.图像标签：
<img src="../resources/image/1.jpg" alt="代替文字" title="悬停文字" width="100px" height="100px">
3. 超链接标签：
1. 跳转到网页：
<!--
href：必填，表示要跳转到哪个页面
target：表示窗口在哪里打开
_blank：在新标签中打开
_self：在自己的页面中打开
-->
<a href="https://www.baidu.com" target="_self">跳转到百度</a>
2. 跳转到本地页面：
<a href="2.网页的基本标签.html" target="_blank">跳转到本地页面</a>
3. 锚链接：
<!--锚链接
1. 需要一个锚标记
2. 跳转到标记
#
-->
<!--使用name做标记-->
<a name="top">顶部</a>
<a href="#top">回到顶部</a>
<!--使用锚链接跳转到其他页面的指定位置-->
<a href="4.超链接标签及应用.html#top">回到第四个页面的顶部</a>
4. 功能性链接：
- 邮件链接：mailto:
<a href="mailto:aaa@qq.com">点击联系我</a>
- QQ链接：
4. 块元素和行元素：
- 块元素：无论内容多少，该元素独占一行。（p、h1-h6…）
- 行内元素： 内容撑开宽度，左右都是行内元素的可以排在一行。（a，strong，em…）
5. 列表标签：
1.介绍：
列表是信息资源的一种展现形式，列表可分为：无序列表，有序列表，定义列表。
2. 有序列表：
<!--有序列表
应用范围：试卷，问答....
-->
<ol>
<li>java</li>
<li>html</li>
<li>css</li>
</ol>
3. 无序列表：
<!--无序列表
应用范围：导航，侧边栏
-->
<ul>
<li>小马</li>
<li>小赵</li>
<li>小徐</li>
</ul>
4. 自定义列表：
<!--自定义列表
dl : 标签
dt ：列表名称
dd : 列表内容
应用范围：公司网站底部
-->
<dl>
<dt>姓名</dt>
<dd>小马</dd>
<dd>小赵</dd>
<dd>小徐</dd>
<dt>学科</dt>
<dd>java</dd>
<dd>css</dd>
<dd>html</dd>
</dl>
6. 表格：
要求：用html写出如下表格
<!--表格table
行：tr
列：td
-->
<table border="1px">
<tr>
<!-- colspan="3" 跨列 -->
<td colspan="3">学生成绩</td>
</tr>
<tr>
<td rowspan="2">小马</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
<tr>
<!--rowspan="2" 跨行 -->
<td rowspan="2">天赐</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
</table>
7. 媒体元素：
1.视频元素： video
<!--视频标签
controls : 控制条
autoplay :自动播放
-->
<video src="../resources/video/罗斯.mp4" controls autoplay>罗斯</video>
2. 音频元素：audio
<!--音频
controls: 控制条
autoplay: 自动播放
-->
<audio src="../resources/audio/小汐.mp3" controls autoplay>小汐</audio>
8. 页面结构分析：
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主体</h2>
</section>
<footer>
<h2>网页脚部</h2>
</footer>
9. iframe内联框架：
1. iframe内联标签的使用：
<!--iframe内联框架
src: 地址
width: 宽度
height: 高度
-->
<iframe src="https://www.baidu.com" frameborder="0" width="300px" height="300px"></iframe>
2. iframe结合a标签使用：
点击跳转到博客：
<iframe src="" name="CSDN" frameborder="0" width="300px" height="300px"></iframe>
<a href="https://www.csdn.net" target="CSDN">点击跳转</a>
10. 表单：
1. 语法：
2. 表单元素格式：
3. 演示：
<!--form表单
action：表单提交的位置，可以是网站，也可以是一个请求处理地址
method：post，get 提交方式
get方式提交：我们可以在url看到我们提交的信息，不安全，高效。
post方式提交：url中看不到我们提交的信息，安全，可以传输大文件
-->
<form action="8.页面结构分析.html" method="post">
<!--文本输入框 ： input type="text"-->
<p>账号：<input type="text" name="username"/></p>
<!--密码框： input type="password" -->
<p>密码：<input type="password" name="pwd"/></p>
<p>
<input type="submit"/>
<input type="reset" />
</p>
</form>
4. post请求如何查看提交的信息：
5. 单选框：
1. 单选框radio：
- 必须指定一个value值，若出现两个单选框，要设置name属性，并且属性要一样。
<!--单选框标签
input type="radio"
value：单选框的值
name：表示组
checked: 默认被选中
-->
<p>性别：
<input type="radio" value="boy" name="sex" checked/>男
<input type="radio" value="girl" name="sex"/>女
</p>
6. 按钮和多选框：
1. 多选框：
<!--多选框
checked ：默认选中
-->
<p>爱好：
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="eat" name="hobby">吃饭
<input type="checkbox" value="playgame" name="hobby">打游戏
<input type="checkbox" value="study" name="hobby" checked>学习
</p>
2. 按钮：
<!--按钮
type="button" 普通按钮
type="image" 图片按钮
type="submit" 提交按钮
type="reset" 重置按钮
-->
<p>按钮：
<input type="button" value="点击变长" name="btn">
<input type="image" src="../resources/image/小汐.jpg" height="50px" width="50px">
</p>
<p>
<input type="submit">
<input type="reset" >
</p>
7. 下拉框、文本域、文件域：
1.下拉框：
<!--下拉框，列表框
selected : 默认被选中
-->
<p>城市：
<select name="列表名称" id="">
<option value="njc">南京</option>
<option value="szc" selected>苏州</option>
<option value="yzc">扬州</option>
<option value="shc">上海</option>
</select>
</p>
2. 文本域：
<!--文本域
-->
<p>反馈：
<textarea name="textarea" id="" cols="50" rows="10" >
文本内容
</textarea>
</p>
3. 文件域：
<!--
文件域
type="file"
name="file"
-->
<p>
<input type="file" name="file" >
</p>
8. 搜索和简单验证：
1. 简单的验证：
- 邮箱验证：
<!--邮件验证 -->
<p>邮箱：
<input type="email" name="email" >
</p>
- URL验证：
<!-- URL验证 -->
<p>URL:
<input type="url" name="url">
</p>
- 数字验证:
<!-- 数字验证
max:最大值
min:最小值
step:步伐
-->
<p>商品数量：
<input type="number" name="num" max="100" min="0" step="1">
</p>
2. 滑块：
<!-- 滑块
type="range"
-->
<p>音量：
<input type="range" min="0" max="100" name="voice" step="2">
</p>
3. 搜索框：
<!-- 搜索框
type="search"
-->
<p>搜索：
<input type="search" name="search">
</p>
9. 表单的运用：
- readonly：只读
- disabled：禁用
- hidden：隐藏
1. 增强鼠标可用性：
<!-- 增强鼠标可用性-->
<label for="ma">点我</label>
<input type="text" id="ma">
10. 表单的简单验证：
- 常见方式：
- placeholder : 提示输入内容，可在文本框中添加该属性。
- required：非空，表示表单不能为空。
- pattern：正则表达式。可上网去查找对应格式。
2. 滑块：
<!-- 滑块
type="range"
-->
<p>音量：
<input type="range" min="0" max="100" name="voice" step="2">
</p>
3. 搜索框：
<!-- 搜索框
type="search"
-->
<p>搜索：
<input type="search" name="search">
</p>
9. 表单的运用：
- readonly：只读
- disabled：禁用
- hidden：隐藏
1. 增强鼠标可用性：
<!-- 增强鼠标可用性-->
<label for="ma">点我</label>
<input type="text" id="ma">
10. 表单的简单验证：
- 常见方式：
- placeholder : 提示输入内容，可在文本框中添加该属性。
- required：非空，表示表单不能为空。
- pattern：正则表达式。可上网去查找对应格式。