这是我参与「第五届青训营 」伴学笔记创作活动的第11天
今天主要是对自己之前HTML知识的查漏补缺
1.网页乱码
解决方法：使用meta标签告诉浏览器使用utf-8字符集解析文字
meta元标签：定义一些特征属性
<head>
<meta charset="utf-8">
</head>
2.head标签
1.meta
<meta name="keywords" contest="小蔡的网站关键字…">
<meta name="description" contest="网站描述…">
<meta name="author" contest="作者…">
<meta name="keywords" contest="小蔡的网站关键字…">
<!--五秒后跳转到百度-->
<meta http-equiv="refresh" contest="5;http://www.baidu.com">
2.link
CSS样式引入
3.script
js脚本语言
2.HTML常见基础标签
单标签 meta
双标签 html
3.第一个HTML
<!DOCTYPE html>
<html lang="en">
<!--
head:头部
meta：网站描述
title：网站标题-->
<head>
<meta charset="UTF-8">
<title>HelloHTML</title>
<meta charset="utf-8">
<meta name="keywords" content="Yokin'FirstHTML">
</head>
<!--显示的主体-->
<body>
<!--使用a name作为标记-->
<a name="top">头部</a><br/>
<!--标题-->
<h1>一级标签</h1><h2>二级标签</h2><h3>三级标签</h3><h4>四级标签</h4><h5>五级标签</h5><hr/>
<!--段落--> <p>一段</p><p>二段</p><p>三段</p><p>四段</p>
<!--水平标签--><hr/>
<!--换行-->第一行<br/>第二行<br/>第三行<br/><hr/>
<!--粗体，斜体-->
<strong>粗体</strong><br/><hr/><em>斜体</em><hr/>
<!--特殊符号-->
空 格<hr/>大于：><hr/>小于:<<hr/>版权©<hr/>
<!--图像标签-->
<img src="src/main/resources/image/dgdldm.jpg" alt="小羊" title="小羊" width="300" height="300"><hr/>
<!--链接标签
href跳转的页面
target表示窗口在哪打开
_blank在新标签中打开
_self当前页面-->
<a href="/t2" target="_blank">点击我跳转到页面二</a>
<a href="/t2" target="_blank">
<img src="src/main/resources/image/dgdldm.jpg" alt="小羊" title="小羊" width="300" height="300">
</a><hr/>
<!--锚链接-->
<a href="#top">回到顶部</a><hr/>
<!--功能性链接 邮件-->
<a href="mailto:1139172977@qq.com">点击联系我</a><br/>
<!--在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:1139172977:52" alt="点击联系我领取小电影" title="点击联系我领取小电影"/>
</a><hr/>
<!--列表-->
<ol>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol><hr/>
<ul>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul><hr/>
<dl>
<dt>自定义列表</dt>
<dd>dl：标签</dd>
<dt>dt：列表名称</dt>
<dd>dt：列表名称</dd>
</dl><hr/>
<!--表格 border宽度 cellspacing格间空隙 cellpadding字与格的距离-->
<table border="1px" cellspacing="0px" cellpadding="0px"> ------tr行td列
<tr>一行
<!--colspan跨列 column span-->
<td colspan="3"> 1-1</td>
</tr>
<tr>二行
<!--rowspan跨行 row span-->
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>三行
<td>3-2</td>
<td>3-3</td>
</tr>
</table><hr/>
<!--媒体标签 controls控制开关 autoplay 自动播放-->
<video src="src/main/resources/image/U2 Viewing & Listening_s5.wmv" controls autoplay></video>
<audio src="../...mp3" controls autoplay></audio>
</body>
</html>
4.页面结构
<!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>
<nav><h2>导航类辅助内容</h2></nav>
<iframe src="https://www.4399.com" width="1000" height="300">嵌套网站</iframe>
</body>
</html>
5.表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form</title>
</head>
<body>
<!--action：表单提交的位置-->
<form action="HelloHTML.html" method="post">
<!-- 文本输入框<input type="text">
提交按钮<input type="submit" >
重置按钮<input type="reset"
默认值value
长度限制maxlength
文本框尺寸size-->
<p>名字：<input type="text" name="username" value="admin" maxlength="8" size="16"></p>
<p>密码：<input type="password" name="password"></p>
<p><input type="submit" value="提交表单">
<input type="reset" value="重置表单">
</p>
<p>
<input type="button" name="btm1" value="点击变长">
<input type="image" value="../...jpg">
</p>
<!-- 单选框 要写一样的name-->
</hr>
<p>
性别：
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex"/>女</hr>
</p>
<!-- 多选框 要写一样的name-->
<p>
</hr> 爱好：
<input type="checkbox" value="basketball" name="hobby"/>篮球
<input type="checkbox" value="fish" name="hobby"/>足球
<input type="checkbox" value="code" name="hobby"/>码字
</p>
<!--下拉框-->
<p>国家：
<select name="列表名">
<option value="China" selected>中国</option>
<option value="American">美国</option>
<option value="子选项三">英国</option>
</select>
</p>
<!--文本域-->
<p>文本域：
<textarea name="textarea" cols="50" rows="10">文本内容</textarea>
</p>
<!--文件域-->
<p>
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
<!-- 内容验证-->
<p>个人信息 <br>
邮箱 <input type="email" name="email"><br>
地址 <input type="url" name="url"><br>
数字 <input type="number" name="age" max="300" min="0" step="any">
</p>
<!-- 滑块-->
<p>音量:
<input type="range" min="0" max="100">
</p>
<input type="search" value="搜索框" name="search">
</form>
</body>
</html>
- 隐藏域hidden
- 只读readonly
- 禁用disable
- 提示文本placeholder
- 非空判断required
- 正则表达式pattern
6.特殊符号&
7.列表OL UL
1.有序列表order list
<ol type="A"> -----type控制序号样式
<li>JAVA</li>
<li>python</li>
<li>AI</li>
<li>大数据 </li>
</ol>
2.无序列表unorder list
<UL type="square"> ------type控制序号样式
<li>JAVA</li>
<li>python</li>
<li>AI</li>
<li>大数据 </li>
</UL>
3.定义列表difination list
8.输入标签INPUT
账号:<input type="text" name="user" id="1" value="请输入账号" />
<br />
密码:<input type="password" name="user" id="1" value="输入密码" />
<p>性别:<input type="radio" name="gender" id="" value="" />男<input type="radio" name="gender">女</p> ------name="gender"name属性值相同时选择会互斥
9.表单标签FORM
<form action="http://www.baidu.com" method="GET" ><table>
<tr>
<td>账号:</td>
<td><input type="text" name="user" value="请输入账号" /></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="user" id="1" value="输入密码" /></td>
</tr>
<tr>
<td>性别:</td>
<td><input type="radio" name="gender" checked value="1"/>男<input type="radio" name="gender" value="0">女</td>
</tr>
<tr>
<td>爱好:</td>
<td><input type="checkbox"/>球1<input type="checkbox"/>球2<input type="checkbox"/>球3</td>
</tr>
<tr>
<td>照片：</td>
<td><input type="file"></td>
</tr>
<tr>
<td>个人简介:</td>
<td><textarea name="intro" id="" cols="30" rows="10"></textarea></td>
</tr>
<tr>
<td>籍贯：</td>
<td><select name="pro">
<option selected>请选择籍贯</option>
<option value="1">广东</option>
<option value="2">深圳</option></select></td>
</tr>
<tr align="middle"><td><input type="submit" value="提交" ></td>
<td><input type="reset" value="清空" ></td></tr>
</table>
</form>
10.框架标签
1.iframe
<a href="http://www.taobao.com" target="taobao">淘宝</a>
<!-- 让淘宝在自己写的iframe中打开 -->
<iframe src="http://www.bilibili.com" name="taobao" width="50%" height="500px" frameborder="0"></iframe>
2.frameset使用时不能在body标签中
<frameset row="200px,*,300px">
<frame src="01.html"/>
<frame src="index.html"/>
<frame src="01input.html"/>
</frameset>
11.块标签和行内标签DIV\SPAN
div是一块作用域
span是一行作用域
