##狂神##
初始HTML
HTML是什么？
HTML (Hyper Text Markup Language)超文本标记语言
超文本包括：文字，图片，音频，视频，动画等
HTML 5提供了一些新的元素和一些有趣的新特性，同时也建立了一些新的规则。这些元素、特性和规则的建立，提供了许多新的网页功能，如使用网页实现动态渲染图形、图表、图像和动画，以及不需要安装任何插件直接使用网页播放视频等。
HTML的优势
- 世界知名浏览器厂商对对HTML5的支持
- 市场的需求
- 跨平台
W3C标准
W3C
World Wide Web Consortium (万维网联盟)
成立与1994年，Web技术领域最具权威和影响力的国际中立性技术标准机构
http://www.w3.org/
http://www.chinaw3c.org/
W3C标准内容
- 结构化标准语言（HTML，XML)
- 表现标准语言(CSS)
- 行为标准语言（DOM,ECMAScript)
常见IDE
- 记事本
- DreamWeaver
- IDEA
- WebStorm
- ......
HTML信息
浏览器配置
setting/Tools/web Browsers
基本结构
<!--DOCTYPE:告诉浏览器，我们要使用什么规范 -->
<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页头部-->
<head>
<!--meta 描述性标签，它用来描述一些网站信息 -->
<!--meta一般用来做SEO -->
<meta charset="UTF-8">
<meta name="keywords" content="HTML笔记">
<meta name="description" content="学习">
<!-- title是网页标题 -->
<title>Title</title>
</head>
<!--body是网页主体-->
<body>
Hello World!!
</body>
</html>网页基本标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 用做网站SEO -->
<meta name="keywords" content="基本标签">
<meta name="description" content="笔记">
<title>基本标签</title>
</head>
<body>
<!-- 标题标签 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!-- 段落标签 -->
<p>第一段落</p>
<p>第二段落</p>
<!-- 换行标签 -->
<!-- 换行标签比较紧凑，段落标签有明显段落间距-->
准备换行，这是行尾<br>新行开头<br>
<hr>
<!-- 水平线标签 -->
分隔符
<hr>
<!-- -->
<!-- 粗体、斜体、粗斜体 -->
<strong>I Love You</strong>
<em>I Love You</em>
<strong><em>I Love You</em></strong>
<!-- 特殊符号 -->
<br>特殊符号:<br>
空格：1 2 3 4 5 <br>
手动空格：1 2 3 4 5<br>
大于号：><br>
小于号：<<br>
版权符号：totoroBlog©2020<br>
</body>
</html>图片标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图像标签</title>
</head>
<body>
<!-- 图像标签 -->
<!--
src:资源地址
相对地址，绝对地址
../上级地址
alt：在图片加载失败的时候，就会用文字代替
title:鼠标悬停在图片上时，所显示的名字
width height: 图片的高和宽
-->
<img src="../resourses/img/a.jpg" alt="( o=^•ェ•)o ┏━┓)" title="天红666" width="128" height="128">
<img src="./src/img/b.jpg" alt="路径有问题了o(*￣▽￣*)o">
</body>
</html>超链接标签
QQ链接。。。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>链接标签</title>
</head>
<body>
<!--
链接标签：
href：跳转页面的地址
a标签内文字：即显示的文字
可以把图片放在a标签内，点击图片跳转网页
title：链接描述
target:表示在哪打开新网页。_self:当前标签打开 _blank:新的页面中打开
-->
<a name="top">这是顶部</a>
<a href="https://www.baidu.com" target="_blank" title="百度一下">百度一下</a>
<br>
<a href="https://www.baidu.com"><img src="../resourses/img/c.jpg" alt="🤣图片不见了" title="百度一下"></a>
<!-- 锚标签 -->
<a href="#top">回到顶部</a>
<br>
<!-- 也可以在网址后添加#号跳到对应网站的对应位置 -->
<a href="http://www.cyc2018.xyz/#java">Cyc2018#Java</a>
<br>
<!-- 功能性链接 -->
<a href="mailto:957584602@qq.com">邮箱联系</a>
<br>
<!-- QQ链接 -->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=804328977&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2:804328977:53" alt="点击这里给我发消息" title="点击这里给我发消息"/>
</a>
<!-- 总结 -->
<!-- 块元素:无论内容多少，该元素独占一行
p hr h1~h6
行内元素:内容撑开宽度，左右都是行内元素的可以排在一行
a strong em
-->
</body>
</html>行内元素和块内元素
列表标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<!-- 有序列表 -->
<ol>
<li>Python</li>
<li>Java</li>
<li>C/C++</li>
</ol>
<!-- 无序列表 -->
<ul>
<li>Python</li>
<li>Java</li>
<li>C/C++</li>
</ul>
<!-- 无序列表嵌套 -->
<ul>
<li>Python
<ul>
<li>基础部分</li>
<li>高级部分</li>
</ul>
</li>
<li>Java
<ul>
<li>JavaSE</li>
<li>JavaEE</li>
</ul>
</li>
</ul>
<!-- 自定义列表 -->
<!--自定义列表
dl：标签
dt：列表名称
dd：列表内容
-->
<dl>
<dt>学科</dt>
<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
-->
<table border="1px">
<tr>
<!-- 跨行 -->
<td rowspan="2">1-1</td> <!-- 1-1跨两行 -->
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<!-- 跨列 -->
<td colspan="2">2-1</td> <!-- 2-1跨两列 -->
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
</body>
</html>媒体元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体元素</title>
</head>
<body>
<!-- 视频元素 -->
<!--视频
src 资源路径
controls 控制面板
autoplay 自动播放
-->
<video src="../resourses/video/gy.mp4" controls width="800" height="600"></video>
<!-- 音频元素 -->
<audio src="../resourses/audio/旭日阳刚%20-%20兄弟.mp3" controls></audio>
</body>
</html>页面结构分析
iframe内联框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联框架</title>
</head>
<body>
<iframe src="https://www.baidu.com" frameborder="0" width="400" height="400"></iframe>
<!-- bilibili视频分享 -->
<p></p>
<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>
<p></p>
<!-- 自定义跳转 在name=hello的iframe打开博客园 -->
<iframe src="" frameborder="0" name="hello" width="500" height="1000">
</iframe>
<a href="" target="hello">点击进入博客园</a>
<a href="">点击博客园</a>
</body>
</html>表单语法
表单验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学习表单</title>
</head>
<body>
<!--表单form
action：表单提交的动作，可以是交给一个网址，也可以是交给一个请求处理地址
method：post get请求方式
-->
<form action="1.SEO与整体结构.html" method="GET">
<!--文本输入框：input type="text"-->
<p>用户名:
<!-- placehoder 输入框内的提示信息 -->
<input type="text" name="username" placeholder="请输入用户名" maxlength="10" size="20" id="mark">
</p>
<p>密码:
<!-- required 不能为空 -->
<input type="password" name="password" placeholder="请输入密码" required>
</p>
<p>
<input type="submit">
<input type="reset">
</p>
<!-- radio单选框标签 value即单选框的值，在提交时对应value
name：单选框组名，在同一个组内的radio标签同时只能选中一个，name值在提交时对应key
checked:默认被选中
-->
<p>性别:
<input type="radio" name="sex" value="boy" checked >男
<input type="radio" name="sex" value="girl">女
</p>
<p>爱好:
<input type="checkbox" name="hobby" value="basketball">篮球
<input type="checkbox" name="hobby" value="dance">跳舞
<input type="checkbox" name="hobby" value="singe">唱歌
</p>
<p>文字按钮与图片按钮:
<input type="button" name="btn1" value="文字按钮">
<input type="image" src="../resourses/img/a.jpg" width="200" height="100">
</p>
<p>国家选择:
<select name="location" id="locat">
<!--下拉框：selected:默认选项-->
<option value="china" selected>中国</option>
<option value="USA">美国</option>
<option value="UK">英国</option>
</select>
</p>
<p>文本域:
<textarea name="text" id="text0" cols="30" rows="10">文本内容</textarea>
</p>
<p>文件域:
<input type="file" name="files" id="f1">
<input type="button" name="upload" value="上传">
</p>
<!--邮件：会简单验证是否是邮箱地址
url：会简单验证是否是网络地址
number：数字验证
-->
<p>邮箱:
<input type="email" name="email">
</p>
<p>网址:
<input type="url" name="url">
</p>
<!--数字验证
max最大数量
min 最小数量
step 每次点击增加或减少的数量-->
<p>商品数量:
<input type="number" name="num" max="100" min="1" step="1">
</p>
<p>音量:
<input type="range" name="voice" min="0" max="100" step="2">
</p>
<p>搜索:
<input type="search">
</p>
<p>增强鼠标可用性(点击跳转):
<label for="mark">点我试试</label>
</p>
<input type="submit">
<input type="reset">
<!-- 一些其他属性
readonly 只读，不可更改
disable 禁用
hidden 隐藏，虽然不可见但是会提交
id 标识符，可以配合label的for属性增加鼠标的可用性
patten 正则表达式验证
-->
</form>
</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
