Html基础
初识HTML
html:Hyper Text markup Langage(超文本标记语言)
<body></body>
等成对的标签，分别叫开放标签和闭合标签
单独呈现的标签例如：<hr/> 意为用/来关闭元素
网页基本信息
<!--<!DOCTYPE html>：告诉浏览器规范 -->
<!DOCTYPE html>
<html lang="en">
<!--<head>标签：代表网页头部 -->
<head>
<!--<meta>描述性标签：用来描述网站的信息 多用于SEO -->
<meta charset="UTF-8">
<meta name="keywords" content="牧之学java">
<meta name="description" content="牧之在坚持">
<!--<title>标签：代表网页标题 -->
<title>网页标题</title>
</head>
<!--<body>标签：代表网页主体 -->
<body>
</body>
</html>
SEO是指搜索引擎优化。全称为(Search Engine Optimization)，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。目的是让其在行业内占据领先地位，获得品牌收益。很大程度上是网站经营者的一种商业行为，将自己或自己公司的排名前移。
搜索引擎优化的技术手段主要有黑帽(black hat)、白帽(white hat)两大类。通过作弊手法欺骗搜索引擎和访问者，最终将遭到搜索引擎惩罚的手段被称为黑帽，比如隐藏关键字、制造大量的meta字、alt标签等。而通过正规技术和方式，且被搜索引擎所接受的SEO技术，称为白帽。
网页基本标签
-
标题标签
-
段落标签
-
换行标签
-
水平线标签
-
字体样式标签
-
注释和特殊符号标签
<!--标题标签-->
<h1>一级标题
<h2>二级标题
<h3>三级标题
<h4>四级标题
<h5>五级标题
<h6>六级标题
<!--段落标签-->
<p>两只老虎 两只老虎</p>
<p>跑得快 跑得快</p>
<p>一只没有耳朵 一只没有尾巴</p>
<p>真奇怪 真奇怪</p>
<p>两只老虎 两只老虎</p>
<p>跑得快 跑得快</p>
<p>一只没有耳朵 一只没有尾巴</p>
<p>真奇怪 真奇怪</p>
<!--换行标签-->
<br/>
<!--水平线标签-->
<hr/>
<!--粗体、斜体-->
<h1>字体样式标签<h1/>
粗体：<strong><>
斜体：<em>
<!--特殊符号-->
空格：
大于号：>
小于号：<
版权符号：©
图像标签
<img src="path"（图像地址） alt="text"（图像替代文字） title="text"（悬停文字） width="x" height="y"（宽和高）>
<!--推荐使用：相对路径-->
<img src="../resources/image/smoke.jpg" alt="替换文字" title="悬停文字" width="300" height="300">
超链接标签及应用
<!--a:标签-->
<!--href：必填，表示要跳转到哪个页面-->
<a href="path" target="目标窗口位置">链接文本或图像</a>
-文本超链接
-图片超链接 <!--文字超链接-->
<!--target="_blank":在新标签中打开-->
<!--_self:在自己的网页中打开-->
<a href="1我的第一个html文件.html" target="_blank">点我跳转到页面</a>
<a href="https://www.baidu.com/" target="_self">百度</a>
<!--图片超链接-->
<a href="1我的第一个html文件.html">
<p><a href="1我的第一个html文件.html">
<img src="../resources/image/smoke.jpg" alt="图片超链接" title="你在看什么" width="300" height="300">
</a><p/>
<!--锚链接-->
<!--1、需要一个锚标记-->
<a name="top">顶部</a>
<!--2、跳转到标记-->
<a href="#top">回到顶部</a>
<a name="down">3图片标签 跳转到底部了</a>
<!--功能性连接-->
<!--邮件链接：mailto:-->
<a href="mailto:1850739853@qq.com">联系我</a>
<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:1850739853:53" alt="有疑问可qq联系我" title="有疑问可qq联系我"/></a>
块元素与行内元素
-
-
例如：p、h1-h6
行内元素
-
内容撑开宽度，左右都是行内元素的可以排在一行
-
例如：a、strong、em
列表标签
列表分类：
-
有序列表
-
无序列表
-
自定义列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- - 有序列表：ol:order list-->
<!--应用范围：试卷、问答-->
<ol>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ol>
<!-- - 无序列表：ul：unorder list-->
<!--应用范围：导航、侧边栏-->
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
<!-- - 自定义列表-->
<!--dl:标签 list label-->
<!--dt:列表名称 list title-->
<!--dd:列表内容-->
<dl>
<dt>字母</dt>
<dd>A</dd>
<dd>B</dd>
<dd>C</dd>
<dd>D</dd>
<dt>还是字母</dt>
<dd>A</dd>
<dd>B</dd>
<dd>C</dd>
<dd>D</dd>
</dl>
</body>
</html>
媒体元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体元素学习</title>
</head>
<body>
<!--音频和视频
src:路径
controls:控制条
autoplay:自动播放
muted:静音
-->
<video src="../resources/image/zhou.mp4" controls autoplay muted width="600" height="900" ></video>
<audio src="../resources/image/人间.mp3" controls></audio>
</body>
</html>
页面结构分析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面结构分析</title>
</head>
<body>
<header>
<h1>网页头部</h1>
</header>
<section>
<h1>网页主体</h1>
</section>
<footer>
<h1>网页脚部</h1>
</footer>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面内联框架</title>
</head>
<body>
<!--src=""：引用页面地址-->
<!--name="hello"：框架标识名-->
<iframe name="hello" src="" frameborder="0" width="500" height="500"></iframe>
<a href="https://www.cnblogs.com/isoak/" target="hello">点击跳转</a>
</body>
</html>
初识表单get和post提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<!--
action：表单提交的位置，可以是网站，也可以是一个请求的处理地址
method：post \ get
get提交方式：高效，但不安全（可以在url中看到信息）
post提交方式:比较安全，可以传输大文件
-->
<form action="1我的第一个html文件.html" method="post">
<p>用户：<input type="text" name="username"></p>
<p>密码：<input type="password" name="pwd"></p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
文本框和单选框
<!--
value:初始值
maxlength:文本框中字节输入最大值
size:文本框长度
-->
<p>用户：<input type="text" name="username" value="里牧之" maxlength="8" size="30"></p>
<!--单选框标签
input type="radio"
value="boy":单选框的值
name="gender"表示组（同一组就只能单选）
-->
<p>性别：
<input type="radio" value="boy" name="gender">男
<input type="radio" value="girl" name="gender">女
</p>
按钮和多选框
<!--多选框-->
<p>爱好：
<input type="checkbox" value="java" name="code">java
<input type="checkbox" value="c++" name="code">c++
<input type="checkbox" value="html" name="code">html
<input type="checkbox" value="c" name="code">c
</p>
<!--按钮
input type="button"普通按钮
input type="image" 图片按钮
input type="submit"提交按钮
input type="reset" 重置按钮
-->
<p>按钮:
<input type="button" value="点击变长" name="btn1">
<input type="image" src="../resources/image/smoke.jpg" width="300" height="300">
</p>
<p>
<input type="submit">
<input type="reset">
</p>
列表框文本域和文件域
<!--
下拉框、列表框
selected:默认选项
-->
<p>下拉框
<select name="列表名称">
<option value="选项的值" >中国</option>
<option value="选项的值">美国</option>
<option value="选项的值">英国</option>
<option value="选项的值"selected>德国</option>
</select>
</p>
<!--
文本域\<textarea>
rows="50" 行
cols="10" 列
-->
<p>反馈:
<textarea name="textarea" cols="10" rows="50"></textarea>
</p>
<!--
文件域
<input type="file"
-->
<p>
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
搜索框滑块和简单验证
<!--邮件验证-->
<p>邮箱：
<input type="email" name="mail">
</p>URL：
<!--URL验证-->
<p>
<input type="url" name="mail">
</p>
<!--数字验证-->
<p>数字：
<input type="number" name="mail" max="10" min="0" step="20">
</p>
<!--滑块-->
<p>滑块：
<input type="range" name="voice" max="100" min="0" step="1">
</p>
<!--搜索框-->
<p>搜索：
<input type="search" name="search" >
</p>
表单的应用
<!--只读：readonly-->
<p>用户：<input type="text" name="username" value="里牧之" maxlength="8" size="30" readonly></p>
<!--隐藏：hidden-->
<p>密码：<input type="password" name="pwd" hidden></p>
<!--禁用：disabled-->
<input type="radio" value="boy" name="gender" disabled>男
<!--增强鼠标可用性：for="mark"--id="mark" -->
<label for="mark">点我试试</label>
<input type="text" id="mark">
表单的初级验证
为什么要进行表达验证？
<!--提示信息：placeholder="请输入用户名"-->
<p>用户：<input type="text" name="username" placeholder="请输入用户名"></p>
<!--非空判断：required-->
<p>用户：<input type="text" name="username" maxlength="8" size="30" required></p>
<!--正则表达式：pattern-->
<input type="email" name="mail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">如果纰漏请指正，谢谢
10/14/2021
浙公网安备 33010602011771号