今天开始励志学习前端，同时也花点时间学习Python，因为专业要用到
每天都会在这里记学习笔记，希望大家监督！
我是跟着B站的视频学习的，之前自学过html、css和JavaScript的基础，不过现在都忘得差不多的，这个东西还是应该多动手去练一练。
HTML部分已经学完了，现在总结一下我认为比较重要的知识点
https://www.w3school.com.cn/tags/tag_link.asp可以查标签
00、序章：VScode中常用快捷键介绍
- 标签并列关系 如div+span
- 创建多个用* 如div*5
- :是给input元素设置类型
- {}是设置内容的
- ()是对内部的内容统一添加功能 如 (tr>td*3)*3
- []是设置属性 如div[id=demo class]
- [key=value]可以为属性赋值
- $设置起始数字排序 div{$}*5
- @设置$的起始数字 div{$@5*5}
开头的标签<!DOCTYPE html>是一个声明标签，告诉网页我们用的是最新的标html5
下面这个是一个声明语言的作用，lang是language，en是english，如果是中文页面就是zn-CH
但是实际上，定义为en也可以写中文，定义为zn-CH也可以写英文，问题不大
<html lang="en">
meta标签可以作为一些声明，或者网页适配，关键字，描述，或者请求等等，放在head里
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一个网页</title>
<base target="_blank">
<!-- 网页适配 -->
<meta name="viewpoint" content="width=device-width, initial-scale=1.0">
<!-- 关键字 -->
<meta name="keywords" content="张子蓥">
<!-- 描述 -->
<meta name="description" content="这是我的页面">
<!-- 请求：如刷新-->
<!-- <meta http-equiv="refresh" content="3,http://www.baidu.com"> -->
</head>
一、常见的标签
（1）标题标签h1，这个比较简单。 <br/>是换行，/可以加也可以不加，加/是比较规范的写法。p是段落标签
<h1>hello world hello java</h1>
<p>啊啊啊啊啊啊啊啊啊啊啊<br>啊啊啊啊啊</p>
（2）文本格式化标签，如下图，推荐使用语义更强的标签
](https://img-blog.csdnimg.cn/77acf2a6339d4c7ea93d522169c7ce38.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBARm9yTXlFY2xpcHNlLg==,size_20,color_FFFFFF,t_70,g_se,x_16)
（3）div和span，就是两个盒子，div是大盒子，span是小盒子，这个就是用来布局页面的，没什么语义
<div>
<span>哈哈哈哈哈</span>
<span>嘻嘻嘻嘻嘻</span>
<span>嘿嘿嘿嘿嘿</span>
</div>
（4）img标签：图片标签，是一个单标签，它有一些属性，src是位置，alt是如果找不到路径中的图片显示的内容，title是鼠标放上去显示的内容，width：图片宽度，height：图片高度，border：边框宽度
<img src="./1.png" alt="显示失败" title="这是一幅美景" width="200" height="100" border="2">
关于这部分内容还有个知识点，就是图片的src路径，相对路径中./或者不写表示当前目录，…/是上一级目录， /是根目录，这些是相对路径，绝对路径就是直接把文件的位置copy过来。 绝对路径分为线上路径和本地路径如下图
<!-- 本地的绝对路径 -->
<img src="Z:\代码学习文件\web前端学习\1.png" alt="错误" width="200" height="100">
<!-- 线上绝对路径 -->
<img src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="显示错误">
（5）a标签：必须属性为href，是链接的地址。还有targret属性，是链接的打开方式，默认值是_self，本页打开，可以改为_blank，在新的页面打开。·······链接分为内部链接和外部链接以及空链接，空链接用#代替
<!-- a标签-->
<a href="http://www.baidu.com" title="百度网页" target="_blank"><h1>外部链接</h1></a>
<!-- 只写一个#表示打开当前页面 -->
<a href="#">空链接</a>
<!-- 打开本地页面 -->
<a href="./demo1.html">内部链接</a>
锚点：#+id的名字，就是一个锚点 不仅可以链接当前页面，也可以链接到其他的页面。在定义锚点时，a标签中的href属性填写#+id名字，该id和到目标位置id名保持一致噢~
<h1 id="top">顶部</h1>
<h1>026</h1>
<h1>027</h1>
<h1>028</h1>
<h1>029</h1>
<h1>030</h1>
<!-- #+id的名字，就是一个锚点 不仅可以链接当前页面，也可以链接到其他的页面 -->
<a href="#top">返回顶部</a>
<a href="./一些常用标签.html#middle">链接到其他页面</a>
<a href="./一些常用标签.html#bottom">进入新闻页面的底部</a>
（6）特殊字符，很多地方直接输入是不能在网页中显示的，所以需要用到特殊字符~
二、表格和列表标签
（1）表格：tr定义行，th定义表头，td定义单元格，th是自带加粗和居中功能的，这也比较好理解嘛，毕竟是表头。除此之外还有thead和tbody，前者放表头整个一行（别和th混淆），tbody放表体，这样可以更清晰一些。
<table>
<tr>
<td></td>
</tr>
</table>
在VScode中这里有很多快捷键可以用，(tr>td*4)*4 这个快捷键，是将圆括号里的元素创建4遍
<!-- table tr定义行，th定义表头，td定义单元格 -->
<!-- bordercolor:边框颜色，heignt和width表格高宽，align:表格对其方式，center、left、rignt
cellspacing：边框和边框的距离，cellpadding：边框和内容的距离，background：表格背景，bgcolor：表格背景颜色 -->
<table border="10" bordercolor="red" width="400" heignt="200" align="center" cellspacing="10"
cellpadding="10">
<!-- (tr>td*4)*4 这个是快捷键，将圆括号里的元素创建4遍 -->
<thead>
<tr>
<th>姓名</th> <!--多行编辑的快捷键：ctrl+alt+鼠标中键-->
<th>性别</th>
<th>年龄</th>
<th>身高</th>
</tr>
</thead>
<tbody>
<tr>
<td>奥里给</td>
<td>男</td>
<td>21</td>
<td>175</td>
</tr>
<tr>
<td>giao哥</td>
<td>男</td>
<td>35</td>
<td>165</td>
</tr>
<tbody>
</table>
（2）合并单元格的步骤：1.先确定是跨行还是跨列 2.找到目标单元格，写上合并方式（跨行rowspan，跨列colspan）
3.删除多余的单元格。
<table>
<tr>
<td rowspan="2">1</td>
<td colspan="2">2</td>
<td>3</td>
<td>4</td>
<!-- <td>5</td> -->
</tr>
<tr>
<td colspan="4">2</td>
<!-- <td>2</td> -->
<!-- <td>3</td>
<td>4</td> -->
<!-- <td>5</td> -->
</tr>
<tr>
<td>1</td>
<td colspan="2">2</td>
<!-- <td>3</td> -->
<td colspan="2">4</td>
<!-- <td>5</td> -->
</tr>
</table>
效果如下：
| 1 | 2 | 3 | 4 | |
| 2 | ||||
| 1 | 2 | 4 | ||
```html
<ul type="circle">
<li>GTA5</li>
<li>地平线4</li>
<li type="disc">生化危机</li>
<li type="square">赛博朋克</li>
<li>镜之边缘</li>
<li>刺客信条</li>
<li>古墓丽影</li>
</ul>
有序列表。type是类型，有A、a、1、Ⅰ。start是开始的位置，reversed表示倒序，倒序小于0则出现负数。字母也是一样的，有序列表用的比较少，不如无序列表用的多，无序列表和自定义列表要重点掌握。
<ol type="A" start="3" reversed> <!--start表示开始的位置-->
<li>刺客信条</li>
<li>消逝的光芒</li>
<li>极品飞车</li>
<li>使命召唤</li>
<li>看门狗</li>
</ol>
自定义列表：dl>dt、dd，dl里只能放dt和dd，但是dt和dd都是容器级别的标签，里面放什么都可以
<dl>
<dt>北京</dt>
<dd>首都，金融中心</dd>
<dd>政治中心</dd>
<dd>北京烤鸭非常不错</dd>
</dl>
<dl>
<dt>上海</dt>
<dd>经济中心，魔都</dd>
<dd>外滩非常不错</dd>
<dd>带劲</dd>
</dl>
三、表单标签
表单域、表单控件、提示信息。表单域是整个表单区域，用form来定义（双标签），主要功能就是给服务器提交数据。action 提交数据的地址，method 提交数据的方式，target 在哪里查看结果，name表单域名称
<!-- action 提交数据的地址
method 提交数据的方式
target 在哪里查看结果 -->
<form action="./what" method="GET" target="_blank" ></form>
（1） input标签-type属性：input是一个单标签，其中有一个type属性，它的属性值描述如下：
应用的方式如下所示。ps：label标签是什么呢？为input元素定义标注的！这样光标点击label定义的文字也可以选中相应的元素，这样可以增加用户体验噢~~label中的for属性和input中的id属性应该保持相同的名字。
<label for="username">用户名</label>
<!-- 1.单行文本框 -->
<!-- pattern:对输入的内容做校验，比如数字0-9，2-5位 maxlength是输入的最大值 -->
<input type="text" id="username" pattern="[0-9]{2,5}" maxlength="6">
<!-- 2.密码框 input:password + tab 快捷键-->
<label for="pwd"></label>
<input type="password" id="pwd">
<hr>
<!-- 3. 单选框 radio:只能选择一次
单选框要统一设置name属性,通过value来设置不同的值,通常要通过label标签来说明input-->
<label>性别</label>
<label for="man">男</label>
<input type="radio" name="sex" id="man" value="男">
<label for="woman">女</label>
<input type="radio" name="sex" id="woman" value="女">
<hr>
<!-- 4. 多选框 -->
<label>兴趣爱好</label>
<label for="basketball">篮球</label>
<input type="checkbox" id="basketball" name="intrest" value="篮球">
<label for="baseball">排球</label>
<input type="checkbox" id="baseball" name="intrest" value="排球">
<label for="tennis">羽毛球</label>
<input type="checkbox" id="tennis" name="intrest" value="羽毛球" >
<!-- 5. 图片 -->
<input type="image" src="./1.png" width="50" height="10"><hr>
<!-- 6.上传文件 -->
<input type="file" >
<!-- 7.隐藏文本 -->
<input type="hidden">
<!-- 按钮 -->
<input type="button" value="普通按钮">
<!-- 充值按钮 -->
<input type="reset" value="重置按钮">
<!-- 提交按钮 -->
<input type="submit" value="提交按钮">
这里面有两个注意事项：name和value是每个表单元素都有的属性值，主要是给后台人员使用的。单选和复选中的name必须一样，这样才能实现多选一和多选多的效果。（如性别，name不同会导致男女可以同时选中）
（2）input标签-checked属性：主要用于单选框和多选框，设置它们的默认值，用法如下
<!--单选框只能有一个checked="checked"-->
<input type="radio" name="sex" id="man" value="男" checked="checked">
<input type="radio" name="sex" id="woman" value="女">
<!--多选框可以有多个checked="checked"-->
<input type="checkbox" id="basketball" name="intrest" value="篮球" checked="checked">
<input type="checkbox" id="baseball" name="intrest" value="排球" checked="checked">
<input type="checkbox" id="tennis" name="intrest" value="羽毛球" >
（3）select标签，用法如下。ps：定义默认值是可以加上selected=“selected”，select标签中至少有一对option
<form action="">
<label for="choose">选择游戏</label>
<!-- 下拉框 size：显示数量-->
<select id="choose"> <!--multiple是选择多个的属性-->
<option>赛博朋克2077</option>
<option selected="selected">地铁：离去</option>
<option>地平线4</option>
<option>极品飞车21：热度</option>
<option>荒野大镖客2</option>
<!-- 分组 这里的label属性是给分组起标题 -->
<optgroup label="弹出选项">
<option>动作类</option>
<option>角色扮演</option>
<option>沙盒</option>
<option>第一人称射击</option>
<option>策略类</option>
</optgroup>
</select>
</form>
（4）textarea标签没有value属性，是双标签，默认值写在标签中间，而input中的text是有value属性的
四、案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
<h3>青春不常在，抓紧谈恋爱</h3>
<table width="500">
<!-- 第一行 -->
<tr>
<td>
<label>性别</label>
</td>
<td>
<!-- 图片要注意路径的问题噢 -->
<input type="radio" id="man" name="sex" value="男">
<img src="./man.jpg" alt="无法显示" >
<label for="man">男</label>
<input type="image" src="./女.jpg" id="xingbie">
<input type="radio" id="woman" name="sex" value="女">
<label for="woman">女</label>
</td>
</tr>
<!-- 第二行 -->
<tr>
<td>
<label>生日</label>
</td>
<td>
<select>
<option selected="selected">--请选择年--</option>
<option>1999</option>
<option>1998</option>
<option>1997</option>
<option>1996</option>
</select>
<select>
<option selected="selected">--请选择月--</option>
<option>1</option> <!-- option{$}*12 快捷键-->
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<select>
<option selected="selected">--请选择日--</option>
<!-- option{$}*30 快捷键-->
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</td>
</tr>
<!-- 第三行 -->
<tr>
<td>
<label>所在地区</label>
</td>
<td>
<textarea cols="30" rows="1">所在地区</textarea>
</td>
</tr>
<!-- 第四行 -->
<tr>
<td>
<label >婚姻状况</label>
</td>
<td>
<input type="radio" id="nomarry" name="marry？" checked="checked">
<label for="nomarry">未婚</label>
<input type="radio" id="alreadymarry" name="marry？">
<label for="alreadymarry">已婚</label>
<input type="radio" id="outmarry" name="marry？">
<label for="outmarry">离婚</label>
</td>
</tr>
<!-- 第五行 -->
<tr>
<td>
<label>学历</label>
</td>
<td>
<input type="text" value="博士后">
</td>
</tr>
<!-- 第六行 -->
<tr>
<td>
<label>喜欢的类型</label>
</td>
<td>
<label for="Charming">妩媚的</label>
<input type="checkbox" id="Charming" name="liketype">
<label for="Cute">可爱的</label>
<input type="checkbox" id="Cute" name="liketype">
<label for="Young">小鲜肉</label>
<input type="checkbox" id="Young" name="liketype">
<label for="Oldman">老腊肉</label>
<input type="checkbox" id="Oldman" name="liketype">
<label for="All">都喜欢</label>
<input type="checkbox" id="All" name="liketype">
</td>
</tr>
<!-- 第七行 -->
<tr>
<td>
<label for="introduction">自我介绍</label>
</td>
<td>
<textarea in="introduction" cols="30" rows="3" >请输入自我介绍</textarea><br>
<!-- textarea没有value属性，text有 -->
</td>
</tr>
<!-- 第九行 -->
<tr>
<td>
</td>
<td>
<input type="submit" value="免费注册">
</td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox" id="agree" value="我同意注册条款和会员加入标准">
<label for="agree">我同意注册条款和会员加入标准</label>
</td>
</tr>
<tr>
<td></td>
<td>
<a href="http://www.baidu.com">我是会员，立即登录</a>
</td>
</tr>
<tr>
<td></td>
<td>
<h3>我承诺</h3>
<ul>
<li>年满18岁，单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
</td>
</tr>
</table>
</form>
</body>
</html>
ok！html部分学完了，相对来说还是非常简单的，但是需要多动手做一做，马上开始CSS，希望自己能坚持下去，师傅领进门，修行在个人啊兄弟们！！奥利给！！！
709
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
