今天开始励志学习前端,同时也花点时间学习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)文本格式化标签,如下图,推荐使用语义更强的标签
(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,希望自己能坚持下去,师傅领进门,修行在个人啊兄弟们!!奥利给!!!