HTML 基础学习笔记（2021.10.21~22）

转载

mob604757037cf3 2021-10-22 17:10:00

文章标签 html 表单行内元素文本域块元素 文章分类 代码人生

HTML

HTML

一、初识HTML

1. 什么是HTML
3. 优势
4. W3C标准
demo：

二、网页基本信息
三、网页基本标签
四、图像标签
五、超链接标签及应用
六、块元素和行内元素

1. 块元素
2. 行内元素

七、列表标签
八、表格标签
九、媒体元素
十、页面结构分析
十一、iframe内联框架
十二、初始表单post提交和get提交
十三、文本框和单选框
十四、按钮和多选框
十五、下拉框文本域和文件域
十六、搜索框滑块和简单验证
十七、表单的应用
十八、表单初级验证

一、初识HTML

1. 什么是HTML

超文本标记语言

HTML 基础学习笔记（2021.10.21~22）_文本域

HTML 基础学习笔记（2021.10.21~22）_块元素_02

3. 优势

所有浏览器都支持，提供统一标准

4. W3C标准

HTML 基础学习笔记（2021.10.21~22）_表单_03

demo：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--    标签栏   -->
<title>第一个网站</title>
</head>
<!--网页主体-->
<body>
我的第一个html
</body>
</html>

二、网页基本信息

<!--我们要使用的规范-->
<!DOCTYPE html>
<html lang="en">

<!--head代表网页头部-->
<head>
<!--    描述字符集编码   -->
<!--    meta用来描述网站的一些信息 -->
<meta charset="UTF-8">
<meta name="keywords" content="xiaowei9s">
<!--    标签栏   -->
<title>第一个网站</title>
</head>
<!--网页主体-->
<body>
我的第一个html
</body>
</html>

三、网页基本标签

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页基本标签</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

<!--段落标签-->
<p>第一段   第一句</p>
<p>第二段   第三句</p>
<p>第三段   第四句</p>
<p>第五段   第六句</p>
<!--换行标签-->
第一段   第一句 <br>
第二段   第三句 <br>
第三段   第四句 <br>
第五段   第六句 <br>

<!--粗体、斜体-->
粗体：<strong>粗体</strong>
斜体：<em>斜体</em>

<!--特殊符号-->
空     格
空 &nbsp;&nbsp;&nbsp; 格
<!--不熟悉的版权符号直接百度或者&加字母自动提示-->

</body>
</html>

四、图像标签

HTML 基础学习笔记（2021.10.21~22）_表单_04

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片标签</title>
</head>
<body>
<!--
src:图片路径
相对地址（推荐使用）    绝对地址
../ :返回相对于自己上一级的目录
-->
<img src="../resources/image/a.png" alt="图像标签">
</body>
</html>

五、超链接标签及应用

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签</title>
</head>
<!--a标签
href：链接url，跳转到的地方
target :
_self:在当前页打开
_blank:在新得页面打开

锚链接：需要一个锚和一个链接


-->
<body>
<!--锚-->
<p name="top">顶部</p>
<a href="第一个html.html" target="_blank">a</a>
<a href="https://www.baidu.com">a</a>
<a href="https://www.baidu.com">
<img src="../resources/image/a.png" alt="">
</a>
<p><img src="../resources/image/a.png" alt=""></p>
<p><img src="../resources/image/a.png" alt=""></p>
<p><img src="../resources/image/a.png" alt=""></p>
<p><img src="../resources/image/a.png" alt=""></p>
<p><img src="../resources/image/a.png" alt=""></p>
<p><img src="../resources/image/a.png" alt=""></p>
<!--定位到锚在的地方-->
<a href="#top">回到顶部</a>




<!--功能性链接-->
<a href="mailto:244097861@qq.com">点击联系</a>

<!--qq链接-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2::52" alt="啊是大" title="啊是大"/>
</a>
</body>
</html>

六、块元素和行内元素

1. 块元素

无论内容多少，改元素独占一行

p、 h1~h6、div...

2. 行内元素

内容撑开宽度左右都是行内元素的可以排在一行

em、strong、a

七、列表标签

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<!--有序列表-->
<ol>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
</ol>
<!--无序列表-->
<ul>
<li>第*个</li>
<li>第*个</li>
<li>第*个</li>
</ul>
<!--自定义列表
dl：容器
dt：标题
dd：列表内容
-->
<dl>
<dt>学科</dt>
<dd>语文</dd>
<dd>数学</dd>
<dd>英语</dd>
<dd>理综</dd>

<dt>层次</dt>
<dd>普通</dd>
<dd>良好</dd>
<dd>优秀</dd>
<dd>天才</dd>
</dl>
</body>
</html>

八、表格标签

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--表格table
行 tr
列 td
border 边框
跨行 rowspan=""
跨列 colspan=""
-->

<table border="1px">
<tr>
<td colspan="2">单元格</td>
<td>单元格</td>
<td rowspan="2">单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>

</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>

</body>
</html>

九、媒体元素

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体元素</title>
</head>
<body>
<!--音频和视频
controls 控制条
autoplay 自动播放
-->
<video src="../resources/video/1.mp4" controls autoplay></video>
<audio src="../resources/music/1.mp3" controls autoplay></audio>
</body>
</html>

十、页面结构分析

HTML 基础学习笔记（2021.10.21~22）_块元素_05

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面结构分析</title>
</head>
<body>
<header><h2>网页头部</h2></header>
<section><h2>网页主体/h2></section>
<footer><h2>网页脚部</h2></footer>
</body>
</html>

十一、iframe内联框架

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe内联框架</title>
</head>
<body>
<!--
iframe

scr：页面地址
name：页面标识
width：宽
height：高
-->
<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">
</iframe>


</body>
</html>

十二、初始表单post提交和get提交

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单提交</title>
</head>
<body>
<!--form
action:表单处理提交的地址，可以是网站，也可以是一个请求处理的地址
method：
get：在url中提交的信息，不安全，高效
post：安全，可以传输大文件
-->
<form method="get" action="第一个html.html">
<!--    文本输入框-->
<p>名字 <input type="text" name="username" value="请输入名字" maxlength="8" size="30"></p>
<!--    密码框-->
<p>密码 <input type="password" name="pwd"></p>

<p>
<input type="submit">
<input type="reset">
</p>

</form>
</body>
</html>

十三、文本框和单选框

HTML 基础学习笔记（2021.10.21~22）_块元素_06

十四、按钮和多选框

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>按钮和多选</title>
</head>
<body>
<form action="第一个html.html">
<!--多选框 input type="checkbox"-->
<input type="checkbox" name="hobby" value="1">第一个选项
<input type="checkbox" name="hobby" value="2">第二个选项
<input type="checkbox" name="hobby" value="3">第三个选项
<input type="checkbox" name="hobby" value="4">第四个选项

<!--按钮
普通按钮 type="button"
提交按钮 type="submit"
重置按钮 type="reset" 重置表单内的内容
图片按钮 type="image"
-->
<p><input type="button" value="这是一个普通按钮"></p>
<p><input type="submit" ></p>
<p><input type="reset" ></p>
<p><input type="image" src="../resources/image/a.png"></p>
</form>
</body>
</html>

十五、下拉框文本域和文件域

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉框、文本域、文件域</title>
</head>
<body>
<form action="Demo02.html">
<!--    下拉框-->
<p>
<select name="food">
<option value="1">苹果</option>
<option value="2" selected>肉</option>
<option value="3">米</option>
<option value="4">巧克力</option>
</select>
</p>

<!--    文本域
cols 列数
rows 行数
maxlength 最大字符数量
-->
<p>
<textarea name="content" cols="50" rows="10" maxlength="30">文本内容</textarea>
</p>

<!--    文件域-->
<p>
<input type="file" name="file">
<input type="button" value="上传">
</p>
</form>
</body>
</html>

十六、搜索框滑块和简单验证

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>搜索滑块和简单验证</title>
</head>
<body>
<form action="Demo02">
<!--    邮件验证-->
<p>邮件：<input type="email" name="email" ></p>
<!--    url验证-->
<p>url：<input type="url" name="url" ></p>
<!--    数字-->
<p>数字：<input type="number" name="number" max="100" min="0" step="10"></p>
<!--    滑块-->
<p><input type="range" name="voice" value="15" step="5"></p>
<!--    搜索框-->
<p><input type="search" name="search"></p>

<p><input type="submit"></p>





</form>
</body>
</html>

十七、表单的应用

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单应用</title>
</head>
<body>
<!-- readonly：只读
hidden：隐藏
disable：禁用
不需要确定布尔值，只需要在标签内声明即可使用
-->

<!--增强鼠标可用性-->
<p>
<!--    for锁定的是id，而不是name-->
<label name="lbe1" for="mark">点试试</label>
<input name="mark" id="mark" type="text">
</p>

</body>
</html>

十八、表单初级验证

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单初级应用</title>
</head>
<body>
<form action="Demo02.html">
<!--  为什么要表单验证
减轻服务器负担
安全
placeholder：提示框
require：不能为空
pattern：正则表达式，需要用就直接查
-->
<p><input type="text" name="email" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$" placeholder="请输入邮箱" required></p>

<p><input type="submit"></p>


</form>
</body>
</html>