Day 13 狂神说Java基础笔记（HTML01-19）
01-初始HTML
Hyper Text Markup Language 超文本标记语言
W3C World Wide Web Consortium 万维网联盟
结构化标准语言（HTML\XML）
表现标准语言（CSS）
行为标准（DOM、ECMAScript）
02-网页基本信息
<!--DOCTYPE:告诉浏览器，我们要使用什么规范-->
<!--head标签代表网页头部 -->
<!--meta描述性标签，它用来描述网站的一些信息-->
<!--meta一般用来做SEO-->
<!--title网页标题-->
<!--body代表网页主体-->03-网页基本标签
<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>
<hr/>
中国改编版<br>
两只老虎，两只老虎<br/>
<h1>字体样式标签h1>
<strong>粗体：I love you，strong>
<em>斜体：I love you.em>
空 格：
空 格：<br/>
>
<<br/>
©版权所有
body>
html>04-图像标签
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本标签学习title>
head>
<body>
<a name="top">顶部a>
<h1>一级标签h1>
<h2>二级标签h2>
<h3>二级标签h3>
<h4>二级标签h4>
<h5>二级标签h5>
<h6>二级标签h6>
<p>中国改编版p>
<p>两只老虎，两只老虎p>
<hr/>
中国改编版<br>
两只老虎，两只老虎<br/>
<h1>字体样式标签h1>
<strong>粗体：I love you，strong>
<em>斜体：I love you.em>
空 格：
空 格：<br/>
>
<<br/>
©版权所有
<img src="../resource/1.jpg" alt="text" title="you" width="100" height="100"/>
<a href="https://www.baidu.com" target="_blank">点击我跳转到百度a>
<a href="https://www.baidu.com" target="_blank"><img src="../resource/1.jpg" alt="text" title="you" width="100" height="100">a>
<br/>
<a href="#top">回到顶部a><br/>
<a href="mailto:[email protected]">点我联系a>
body>
html>06-块元素和行内元素
07-列表标签
有序列表
无序列表
自定义列表，公司网站底部
<dl>
<dt> dt>
<dd> dd>
dl>
08-表格标签
<table border="1px">
<tr> tr>
<td colspan="2">1 td>
<td> 2td>
<tr> tr>
<td> 3td>
<td> 4td>
<td> 5td>
<tr> tr>
<td>6 td>
<td>7 td>
<td>8 td>
table>09-媒体元素
<video src="" controls autoplay>video>
<audio src="" controls autoplay>audio>10-页面结构分析
header
footer
section
article
aside
nav
11-iFrame内联框架
<iframe src="1.MyBeloved.html" name="hello" height="1000px" width="800px">niiframe>评论框等
12-表单post和get
post：安全，传输大文件
get：不安全，高效
13-文本框和单选框
<form action="1.MyBeloved.html" method="post">
<p>名字：<input type="text" name="username"> p>
<p>密码：<input type="password" name="pwd">p>
<p>性别：
<input type="radio" value="boy" name="sex" checked>男
<input type="radio" value="girl" name="sex">女
p>
<p>
<input type="submit">
<input type="reset">
p>
form>
14-按钮和多选框
<p>爱好：
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="code" name="hobby" checked>代码
<input type="checkbox" value="chat" name="hobby">聊天
p>
<p>
<input type="button" name="btn1" value="">
<input type="image" src="../resource/1.jpg">
p>15-列表框文本域和文件域
input都要加name
<p>下拉框
<select name="zhi">
<option value="s">chinaoption>
<option value="s" selected>eth瑞士option>
<option value="indian">印度option>
select>
p>
<p>反馈：文本域
<textarea name="textarea" cols="10" rows="5">
nri
textarea>
p>
<p>
<input type="file" name="files">
<input type="button" value="uploadk" name="upload">
p>16-搜索框滑块和简单验证
<p>文件
<input type="file" name="files">
<input type="button" value="uploadk" name="upload">
p>
<p>邮箱
<input type="email" name="email">
网址<input type="url" name="url">
数字<input type="number" name="num" max="100" min="10" step="10">
p>
<p>滑块
<input type="range" name="voice" min="0" max="100" step="2">
p>
<p>搜素
<input type="search" name="search">
p>17-表单应用
name=value
readonly只读
disable禁用
hidden隐藏，但还在，可以传递默认值
增强鼠标可用性
<p>
<label for="mark">clicklabel>
<input type="text" id="mark">
p>18-表单初级验证
安全，减轻压力
placeholder–用户提示信息
required–元素不能为空
pattern–正则表达式：https://www.jb51.net/tools/regexsc.htm