第一次网课笔记
1.标签格式：
例如：
<marquee loop="1" bgcolor="orange">
让学习更简单!
<input type="password">
</marquee>
标签分为单标签与双标签 ，且标签中不能出现同名属性
2.特殊的属性，只有属性值，没有属性名（一般是属性名后加属性值），例如：
<input disabled>
3.HTML基本结构
<html>
<head>
<title>我的网页</title>
</head>
<body>
<marquee>让学习更简单</marquee>
</body>
</html>
[^1]日常开发中 检查 用的最多
4.快速注释方法
ctrl+/
[^2]注释不可以嵌套
撤销：
ctrl+z
5.文档声明（h5)
<!DOCTYPE html>
6.字符编
<meta charset="UTF-8">
[^3]写在head里面
7.lang属性的编写规则:
zh-CN:简体中文
zh-TW:繁体中文
zh:中文
en-US:英文-美国
en-GB:英文-英国
8.（均属于排版标签）
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<div>
<p>一段落</p>
<p>二段落</p>
<p>三段落</p>
</div>
[^3]h1~h6不可以嵌套且p标签里不能有h1~h6,p,div标签
9.块级元素与行内元素
块级元素指独占一行的元素 例如：
<div></div>
<h1></h1>
<p></p>
行内元素指不独占一行的元素 例如:
<input>
[^4]特殊规则1：块级元素里可以写块级元素和行内元素（几乎什么都能写）
[^5]特殊规则2：行内元素里不可以写块级元素但可以写行内元素
[^6]特殊规则3：块级元素中的h1~h6不能相互嵌套
[^7]特殊规则4：p标签中不能写块级元素
10.文本标签
（均写在body中的p标签里）
- 着重要阅读的内容（呈现斜体，后续可以用CSS更改效果）
<em>
国家
</em>
- 十分重要的内容（比em语气强烈）(加粗）
<strong>
国家
</strong>
- 一个小包装带（相比较下div为大包装袋） 包裹后方便同意修改效果
<span>
内容
</span>
11.不常用的文本标签(都可以放在p标签看效果）
分别为：
删除
插入
专属名词
下标文字
上标文字
一段代码
更改文本方向（配合dir属性，可选值：ltr,rtl)
将某些内容提取出来（会加阴影框，配合p标签）
标记变量（即x y)，可与code一起使用
短引用
长引用
地址（块级元素）
<del></del>
<ins></ins>
<dfn></dfn>
<sub></sub>
<sup></sup>
<code></code>
<bod></bod>
<samp></samp>
<var></var>
<q></q>
<blockquote></blockquote>
<address></address>
12.图片标签(暂时算作行内元素）
arc:图片路径
alt:图片描述（文字描述）
width:宽
height:高
<img width=" " height=" " arc=" " alt=" ">
13.相对路径，绝对路径
- 相对路径（多用）
./ 表示当前文件夹
./a/ 表示当前文件夹中的下一文件夹（**/），a是当前文件夹中文件夹的名字**
. ./ 则表示上一级文件夹(. ./. ./. ./ 表示上三级）
- 绝对路径(少用） 本地绝对路径(在D盘中 ，一定要加冒号“：”）（用liveserves无法打开）
<img arc="D:/a/b/c/壁纸.jpg " alt=" ">
- 网络绝对路径（多用）复制网址即可(必须是图片网址） 但有些图片做了防盗链，复制不到自己的代码里
14.常见图片格式
- .gif 动态
- .bmp 大型游戏中用
- webp 网页中的图片
- .jpg 有损压缩图片
- .png 公司logo图，重要配
15. 超链接，跳转页面
用a标签，href里写网页，target中若为_self则在当前页面打开，若为 _blank则在新的页面打开
a标签中不能再写a标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接_跳转页面</title>
</head>
<body>
<a href="https://b.jd.com/s?entry=newuser&from=cjdcom" target="_self">去秒杀</a>
</body>
</html>
浏览器不能直接打开的文件会直接触发下载
downlode即下载进电脑的名字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接_跳转页面</title>
</head>
<body>
<a href="./电影mp4" downlode="快看电影“ 下载电影></a>
</body>
</html>
16.超链接，锚点
只有在a标签中才能用name,才能叫锚点
在p标签里id也可以当做锚点,但是在这里不能在开头写数字
跳转页面技巧
<a href="#“回到顶部>
<a href=”"刷新页面>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="#壁纸2">精美图片</a>
<a name="壁纸2"></a>
<p id="壁纸2">
<p>我是一张壁纸</p>
<img width="300" src="壁纸2.jpg" alt="壁纸">
<a href="#"回到顶部>
<a href=""刷新页面>
</body>
</html>
超链接_跳转页面
<a herf="./超链接_跳转文件.html#图片>点击跳转页面看图片</a>
超链接_小弹窗
<a herf="javascript:alert(666);">点我弹窗</a>
17.超链接_唤起指定应用
<a href="tel:10010">电话联系</a>
<a href="mailto:[email protected]">邮件联系</a>
<a herf="sms:10086">短信联系</a>
18.列表
ol与ul中使用(有序列表，无序列表)：
li表示列表项
dl(自定义列表)中使用:
dt术语标题
dd术语描述
特别注意
有序列表，无序列表，里面只能写列表项，别的不能写，
只能使ol的子元素为li然后在li里写别的标签，
li最好不要单独使用，
列表可以嵌套
19.表格结构
表格分为：
- 表格table
- 表格标题 caption
- 表格头部thead
- 表格主题tbody
- 表格脚注（少用）tfoot
- 表格头部单元格th
- 行tr
- 表格主体与注脚里的单元格td（他们不同）
代码示例：
table里面的属性
<table border="1">
border是边框效果，但是当border的值大于1，那么他的值只能控制外面边框的粗细。
控制表格宽度用width，在border后面写就行。
height改变高度，但是脚注和主题的高度不变。
cellspacing用来调整单元格之间的间距，(只有height可以打在thead标签里面，别的不可以）。
<table border="1" width="500" height="500" cellspacing="0"
thead里面的属性
align表示水平居中，其中可以写left,center,right(即左对齐，中对齐，右对齐）
valign表示垂直居中，其中可以写top,middle,bottom(即上，中，下）
<thead height="50" align="left" valign="top">
tbody里面的属性
与thead里面的属性一样
tfoot里面的属性
与thead里面的属性一样
在**tr th td ** 标签里 thead里面的属性都可以用
小结
20.表格_跨行与跨列
colspan 是跨列
<tr>
<th colspan="5列"上课</th>
</tr>
rowspan 是跨行
<tbody>
<tr>
<td rowspan="4行"上午</td>
<tr>
</tbody>
21.补充几个常用标签
单标签
br 换行效果
hr分割线
双标签
pre按原文显示（按的空格与回车都算数）
I like
I like
I like(效果示意）
22. 表单的基本结构
用form标签（是表单，侧重收集用户的数据），action后面带跳转的浏览器，最后必须加/s，里面还有method=“get”(打开方式）。
input里面必须要有name(百度的访问后端是wd,每个访问的服务器都不一样）。
bottom 为按钮。
23.表单
常用控件
value 值
maxlength 最大长度（即字符框最多能输入多少字符）
效果图
单选框
radio使输入框变为小圆点
name=“gendar” 这个属性可以使其为单选框
sex侧重性，gender侧重性别
value=“male” 起到一个收集数据的作用
checked 为默认选择
性别：
<input type="radio" name="gendar" value="male" checked>男
<input type="radio" name="gendar" value="female">女<br>
<botton>确认</botton>
多选框
checkbox 叫做复选框（多选框） ，即小方格子
爱好：
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="draw" checked>画画
<input type="checkbox" name="hobby" value="dance">跳舞<br>
<botton>确认</botton>
文本域
代码格式：
其他：
下拉框
籍贯：
（selected是在这个标签里的专属选择项，即默认选中
value="京"是必要的,收集的是value的值）
<select name="place">
<option value="京">北京</option>
<option value="骥" selected>河北</option>
<option value="晋">山西</option
隐藏域
防止批量注册，非法注册
**确认按钮多种写法**
第一种
<botton>确认</botton>
第二种(直接显示提交）
**重置按钮**
第一种
<botton type="reset">重置</botton>
第二种
**普通按钮**
第一种
<botton type="botton">检查是否注册</botton>
第二种
**禁用表单控件**
多选框，单选框，文本域，下拉框，option(选择），普通按钮，重置按钮都可以加**disabled**
密码：
<input disabled type="password" name="pwd" value="123" maxlength="6">
**lable标签**
获取焦点（即点击”账户“，使输入框获取焦点）
for="密码"与 id="密码"相关联
多选框，单选框，文本域，下拉框，option(选择），都可以用（普通按钮，重置按钮一般按钮不做任何关联）
第一种
<lable for="密码" >密码：</lable>
<input id="密码" disabled type="password" name="pwd" value="123" maxlength="6">
第二种(更好用）
</lable>
```
fieldset与legend
fieldset可以为表单控件分组。legend标签是分组的标题。
用法：
效果：
总结
可以不用缩进，直接Ctrl + Alt + L会自动格式化代码
提交必须要有 name 和 value，否则不提交
版权归原作者 The_era_achievs_ 所有， 如有侵权，请联系我们删除。