html5学习（狂神老师笔记）

html5学习

结构化标准语言（html ,xml）

表现标准语言（css）

行为标准（dom，ECMAScript（javascript））

ctrl+/
<!-- -->
注释

网页基本标签

标题标签

段落标签

换行标签

水平标签

字体样式标签

注释和特殊符号

<h>一级标签</h>
<p>文本内容</p>
<br/>换行
<hr/>水平线
<!--粗体，斜体-->
粗体；<strong>i love you</strong>
斜体：<em>i love you</em>
特殊字符

图像标签

<img src="图片路径” alt=“图片名称” title= "悬停文字“ width=""height="">

链接标签

嵌套图片

href:必填，跳转到那个页面

target:表示窗口在哪里打开

-blank：在新标签页打开

​ -self：在自己的网页打开

<a href="path" target="目标窗口位置">链接文本或图像</a>

锚链接

1需要一个锚标记

2跳转到标记

使用id做标记

<a id="top">顶部</a>
<a href="#top">回到顶部</a>

功能性链接

块元素：无论内容多少，该元素独占一行

行内元素：内容撑开宽度，左右都是行内元素的可以排在一行

列表标签

 有序列表
 <ol>
 	<li>java</li>
 	<li>python</li>
 </ol>
 无序列表
 <ul>
 	<li>java</li>
 	<li>java</li>
 </ul>
 定义列表
 dl：标签
 dt：列表名称
 dd：列表内容
 <dl>
 	<dt></dt>
 	
 	<dd>java</dd>
 	<dd>python</dd>
 </dl>

表格标签

行：tr
列：td
<table border="1px">
	<tr></tr>
		<td></td>
		<td></td>
	<tr	></tr>
		<td></td>
		<td></td>
</table>

媒体元素

src
controls:控制条
autoplay：自动播放
<video src="地址" controls autoplay></video>
音频对比视频 
<audio></audio>

页面结构

header 标题头部

foote 标记脚部区域的内容

section web页面中的一块独立区域

article 独立文章内容

aside 相关内容或应用（侧边栏）

nav 导航辅助内容

iframe内联框架

<iframe src="http://www.baidu.com" frameboder  width="300px height="300px"> </iframe>
name

表单语法

action:可以是网站也可以是一个请求处理地址
method：post/get提交方式

<form action="" mothod=""> 
	<p>名字:<input type="text" name="username"></p>
	<p>密码：<input type="text" name="password"></p>
	<input type="submit">
	<input type="reset">
	
</form>
文本输入框
input type="text"

get:可以在看url看到我们提交的信息，不安全，效率高
post：比较安全，传输大文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r5syMVE2-1678093375597)(D:\桌面\typora\image-20220811170325813.png)]

value:初始值

maxlength:最长的字符数量

size：文本的长度

<p>性别
	<input type="raid" value="boy" name="sex">男
	<input type="raid value="girl" name="sex">
女
</p>

• 单选框

input type=“radie”

value：单选项的值

name：表示组

• 多选框

input type=“checkbox”

<p>爱好
	<input type="checkbox" valus=sleep name="hobby">睡觉
	<input type="checkbox" valus=code name="hobby">写代码
	<input type="checkbox" valus=chat name="hobby">聊天
	<input type="checkbox" valus=game name="hobby">游戏
</p>

按钮

input type=“button”普通按钮

input type=“image”图片按钮

input type=”submit“提交按钮

input type=”reset“重置

<p>按钮
	<input type="button" name="btn1" value="点击变长">
	<input type="image" src=”地址。。。“>

</p>

下拉框，列表框

<p>下拉框
	<select name="列表名称">
	<option value="选项的值"><option>
	<option value="选项的值" selected></option>
	</select>
</p>

文本域

cols=“50” roms="10"行列

<p>反馈
	<textarea name="textarea" cols="50" roms="10">文本内容</textarea>
</p>

文件域

<p>
	<input type="file" name="file">
	<input type="button" value="上传" name=”upload“
</p>

邮件验证

url

数字

<p>
	<input type=" eamil" name="email">
	<input type="email" name="url">
	<input typr="number" name="num" max="100" min="0" step="1">
</p>

滑块

<p>音量
	<input type="range" name="voice" min="0" max="100" step="2">
</P>

搜索框

<p>搜索
	<input type="search" name="search">
</p>

表格应用

隐藏hidden

只读readonly

禁用disabled

增强鼠标可用性

<p>
<lable for="mark">点我试一下</lable>
<input type="text" id="mark"> 
</p>

表单初级验证

placeholder提示信息

required非空

pattern正则表达式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d4VMVMOB-1678093375599)(D:\桌面\typora\image-20220811183546644.png)]

搜索框

<p>搜索
	<input type="search" name="search">
</p>

表格应用

隐藏hidden

只读readonly

禁用disabled

增强鼠标可用性

<p>
<lable for="mark">点我试一下</lable>
<input type="text" id="mark"> 
</p>

表单初级验证

placeholder提示信息

required非空

pattern正则表达式

[外链图片转存中…(img-d4VMVMOB-1678093375599)]