HTML基本语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>告诉浏览器使用什么规范,现在使用HTML5去掉也没关系。
HTML注释<!-- 里面写内容-->
<html lang="en"> </html> HTML中的内容写入
<head>头部
<title>Title</title>网站标题
<meta charset="UTF-8"> 描述性标签,描述网站的一些信息,一边拿用来做SEO
<body></body>中填写主要内容
<h1></h1>标题标签一级
<h2></h2>二级标签等等
<p></p>段落标签 每段有一定距离
<br/>换行标签换行,每行紧凑
<hr>
加一条横线
粗体<strong></strong>
斜体<em></em>
特殊符号
是空格
>大于
<小于
©版权符号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>是一个标题</title>
</head>
<body>
<h1>这是一个一级标题</h1>
<h2>这是一个二级标题 有几个空格</h2>下面有横线
<hr>
这里会换行<br>
这里会换行<br>
这里会换行<br>
<p>这里换段落</p>
<em><p>这里换段落斜体</p></em>
<strong><p>这里换段落粗体</p></strong>
</body>
</html>
img标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签</title>
</head>
<body>
<img src="../../../Aurora-4k.jpg" alt="一个图片未加载"width="50"height="50"title="鼠标悬停会有文字">
</body>
</html>
链接标签
<a herf="跳转到哪里"></a>
锚标签
<a name="top">顶部</a>
使用name做为标记
然后使用
<a href="#top">跳转</a>
跳转到标记#标记名字
功能性链接
邮件链接mailto
块元素和行内元素
块元素:无论内容多少,该元素独占一行。换行
行内元素:内容撑开宽度,左右都是行内元素的可以排在一行。 不会换行
列表
无序列表
<ul>
<li>内容</li>
</ul>
<ul><li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
有序列表
<ol>
<li>内容</li>
</ol>
<ol><li>a</li>
<li>b</li>
<li>c</li>
<li>d</li></ol>
自定义列表
<dl>
<dt>靠左</dt>
<dd>靠右</dd>
</dl>
<dl>
<dt>学科</dt>
<dd>语文</dd>
<dd>数学</dd>
<dd>英语</dd>
<dd>政治</dd>
</dl>
表格
行tr
列td
<table border="1px">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
跨列<td colspan=" 跨几列">
跨行<td rowspan="跨几行">
学生成绩 | ||
xx | 语文 | 100 |
数学 | 100 | |
xxx | 语文 | 100 |
数学 | 100 |
视频音频
video
<video src="../video/同周共技.mp4" controls autoplay></video>
controls:控制条
autoplay:自动播放
audio
controls:控制条
autoplay:自动播放
iframe内联框架
width=" 数字px" height="数字px" 在自己的网站显示一些引用东西<iframe src="http://www.baidu.com" frameborder="0" height="1000px"width="1000px" name="xxx"></iframe>
<a href="TEST1.html" target="xxx">点击即可跳转</a>
表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<form action="表格.html" method="get">
<!--get方式提交:我们可以在url中直接看到提交的信息,不安全,高效
post方式提交:比较安全,传数大文件
size=""文本框长度
value默认初试值
maxlength=""最长能写几个字符
表单必须有 input type name
readonly只读
-->
<p>
名字: <input type="text" name="username" readonly><!--文本输入框-->
</p>
<p>
密码:<input type="password"name="password"></p>
<!--单选框标签
input type="radio"
value:单选框的值 会把value的值提交
name:表示组
-->
<p>
<input type="radio" value="boy" name="sex">男
<input type="radio" value="girl" name="sex">女
</p>
<!--多选框
-->
<p>
爱好 <input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="study" name="hobby">学习
<input type="checkbox" value="game" name="hobby">打游戏
<input type="checkbox" value="stu" name="hobby" checked>敲代码<!--checked默认选中-->
</p>
<p>
<input type="button"name="btn1" value="点击"><!--普通按钮点击无作用 -->
<!-- <input type="image" src="../video/Aurora-1080.jpg" name="aaa"><!--图片按钮点击可以提交 -->
</p>
<!--下拉框-->
<p>
<select name="列表名字" id="">
<option value="选项的值">中国</option>
<option value="选项的值">美国</option>
<option value="选项的值" selected>瑞士</option> <!--selected默认 -->
<option value="选项的值">印度</option>
</select>
</p>
<!--文本域-->
<p>
<textarea name="textarea" cols="50" rows="10" >文本内容</textarea>
</p>
<!--文件域 -->
<input type="file" name="files" >
<input type="button" value="上传" name="uploda" >
<p>
<input type="submit" disabled><!--提交 不能提交--> <input type="reset"><!--重置按钮-->
</p>
</form>
</body>
</html>
只读readonly
隐藏hidden
禁用disabled
label for=" id内容"增强鼠标可用性点击到某个文本域
placeholer=" 提示信息"提示在文本框中的提示信息
required里面元素不能为空
pattern 输入正则表达式判断