html初始
HTML初识
HTML -->hyper text markup language
超文本标记语言（超文本包括，文字图片，音频，视频，动画等）
成对出现的标签前者叫做开放标签，后者叫做闭合标签。
单个出现的标签叫做自闭和标签。
各个标签讲解
注释：
<!-- 这样子写 ，快捷键ctrl + / -->
<!DOCTYPE html> 这一行是告诉浏览器浏览器使用什么规范
<head>
<!-- head标签代表网页头部，body标签表示网页主体-->
<meta charst='UTF-8'>
<!-- meta标签是一个描述性标签，描述网站的信息，一般用来做seo -->
<title>title标签表示网页标题</title>
</head>
基础标签
段落标签 p
换行标签br/ 自闭和
水平线标签hr/ 自闭和
字体样式标签h1 h2 …
粗体strong
斜体em
<p> </p>
<br/>
<hr/>
<h1> </h1>
<h2> </h2>
<strong> </strong>
<em> </em>
特殊符号
空格：  ; (去掉分号和p之间的一个空格)
版权符号：©:© ;
调用特殊符号转义字符，可以查百度，或者先打出来&和一个字母开头再去选。
图像标签
img标签（自闭和标签，具有自己属性）
<img src = "图片路径",alt = "图片为加载数来显示的文字",title = "鼠标悬停显示的文字",width = "100",height = "100">
一般写相对路径"../html/resources/image/1.jpg"
src 和 alt是必须要有的属性
链接标签
<a href = "链接路径" target = "目标窗口位置（在哪个窗口打开，常用值：_self、_blank）">链接文本或图像</a>
href：必填，表示要跳转到哪个页面
target：表示窗口在哪里打开，target = "_blank"->在新窗口中打开
target = "_self"当前页面直接调转
锚链接：
可以实现跳转到顶部，甚至可以是页面间跳转(就可以设置第一页，第二页。。。)。
回到顶部：
<a name = "top"></a>
首先要在前面加一个跳转标记
<p></p>
...
...
<p></p>
<a href="#top">回到顶部</a>
最后在标记名字前面加一个#号作为跳转地址，这样鼠标点击的时候就会跳转到先前的标记了
跳转到另一个页面的某个标记位置：
<a href = "首页.html#top">跳转到首页顶部</a>
功能性链接
1.邮件链接mailto:
<html>
<head>
<title> 第一个页面</title>
</head>
<body>
键盘敲烂工资过万
<a href="mailto:123@qq.com">联系我</a>
</body>
</html>
效果：
2.qq链接
搜索qq推广，可以自动生成代码
行内元素和块元素概念
块元素：
无论内容多少，该元素独占一行
比如p标签，h1,h2标签都是。
行内元素：
可以排写在一行的标签。
比如a标签，strong，em等等
列表
有序列表：
<!-- 有序列表 -->
<ol>
<li>java</li>
<li>python</li>
<li>运维</li>
<li>c/c++</li>
</ol>
<!-- 有序列表应用范围：考试、问答 -->
无限列表：
<!-- 无序列表 -->
<ul>
<li>java</li>
<li>python</li>
<li>运维</li>
<li>c/c++</li>
</ul>
<!-- 无序列表应用：导航、侧边栏。。。 -->
自定义列表：
<!-- 自定义列表
dl：标签
dt：列表名称
dd：列表内容 -->
<dl>
<dt>学科</dt>
<dd>python</dd>
<dd>java</dd>
<dd>c/c++</dd>
<dd>php</dd>
</dl>
<!-- 常用于，公司底部信息等等 -->
表格标签
<hr/>
<!-- 表格学习
行标签 tr
列标签 td -->
<table border="1px"><!--border是增加边界参数-->
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
</table>
<!-- -->
跨行与跨列：
<table border="1px">
<!-- colspan跨列 -->
<!-- rowspan跨行 -->
<tr>
<td colspan="3">跨列</td>
</tr>
<tr>
<td rowspan="2">跨行</td>
<!-- <td>1-1</td> -->
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<!-- <td>2-1</td> -->
<td>2-2</td>
<td>2-3</td>
</tr>
</table>
<!-- -->
媒体元素
视频元素 video
<hr/>
<!-- 音频和视频 -->
<video src="../program/a1_我的第一个网页/resources/video/！陪伴最长情！-《我的梦》原曲DreamItPossible，动人演绎对梦想执着的追求(高清).mp4" controls autoplay></video>
<!-- controls作用：显示控制条/按钮（暂停/播放等，不加无法显示播放），autoplay作用：打开页面会播放，会自动播放 -->
注意：
把文件放到指定文件夹中
video标签中使用相对路径
音频元素 audio
<!-- 音频 -->
<audio src="../program/a1_我的第一个网页/resources/audio/黄晓明 _ 邓超 _ 佟大为 - 光阴的故事.mp3"controls autoplay ></audio>
<!-- -->
页面结构分析
首先页面的代码都会写在body标签中
会有很多元素，header通常写头部，footer网页脚部，section网页主体部分，atticle独立文章内容，aside相关内容或应用，nav导航类辅助内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页结构分析</title>
</head>
<body>
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主体</h2>
</section>
<footer>
<h2>网页脚部</h2>
</footer>
</body>
</html>
比较重要的是头部脚部和导航。
内联框架
<!-- 内联框架 -->
<iframe src="https://www.csdn.net/" frameborder="0" width="800px" height="300px"></iframe>
<!-- -->
当然还可以使用a标签设置超链接，使页面显示内联网页(这时候需要结合iframe的name还有a标签的target属性)
<!-- 内联框架点击显示 -->
<iframe src=""name="hello" frameborder="0"></iframe>
<a href="../a1_我的第一个网页/未命名2.html"target="hello">点击跳转</a>
<!-- -->
未命名2.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>hello,i am a ????</h1>
</body>
</html>
点击后就会内联显示 未命名2.html 的内容。
表单语法
账号密码和单选框
标签：from
属性有：method，提交方式，常用值有个get、post
action，表单提交的位置，值可以是网站，可以是一个请求处理地址
<!-- 表单form
get方式提交，可以在url中看到提交的信息，不安全，高效
post方式提交，url中无参数改变，可以传输大文件， -->
<form method="POST" action="../a1_我的第一个网页/未命名2.html">
<p>账号<input type="text" name="username"></p>
<p>密码<input type="password"name="pwd"></p>
<p>性别：
<input type="radio" value="boy" name="sex">男
<input type="radio" value="girl" name="sex">女
</p>
<!-- type为radio表示单选框，value就是单选框的值，name一样就在一个组中，才可以保证单选 -->
<!-- 注意，input标签的name属性一定不能少！ -->
<p>
<input type="submit">
<input type="reset">
</p>
</form>
按钮和多选框
<p>
爱好：
<input type="checkbox" name="hobby" value="music">音乐
<input type="checkbox" name="hobby" value="bsk">篮球
</p>
<p>按钮：
<input type="button"name="btn1"value="登录">
<input type="image" src="../a1_我的第一个网页/1.jpg">
</p>
图片按钮会自动提交哦~
列表框文本和文件域
<!-- 下拉框，列表框
-->
<p>下拉框：
<select name="列表名称" id="">
<option value="china" selected>中国</option>
<!-- selected表示默认选中 -->
<option value="american">美国</option>
</select>
</p>
（刚刚查到一个，分享：登录QQ，ctrl+alt+a实现电脑截屏=，=）
文本域：
<p>
反馈：
<br>
<textarea name="textarea" id="" cols="30" rows="10">请输入反馈意见</textarea>
</p>
</body>
文件域：
<p>
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
搜索框滑块和简单验证
邮件、url、数字等验证：
input标签的type属性类型更换即可。
滑块：
<p>滑块：
<input type="range" name="voice" min="0" max="100" step="5">
</p>
搜索框：
<p>
<input type="search" name="search">
</p>
表单初级验证
常用的方式：
1.placeholder-提示信息，输入框控件常用
2.required-表示元素不能为空，非空判断
3.pattern-正则表达式判断，符合正则表达式才可以提交表单
463
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
