前端基础学习

<!DOCTYPE>：文档类型声明，作用是告诉浏览器使用哪种HTML版本来显示网页

1	<!DOCTYPE html>

代码意思是当前页面采取的是HTML5版本来显示网页

lang：定义显示语言，这个属性主要对浏览器是否翻译网页有用，不影响非定义中的语言的显示

meta标签中的charset属性用来规定html文档应该使用哪种字符编码

html常用标签

<br />：换行标签

<div>、<span> ：盒子标签，用来装内容

<img src="图像URL" />:图像标签，相对路径是相对html文件，如果直接是图片名，说明在同一级。也可以使用绝对路径，网络上的或者本地从盘符开始

1 2	alt：图片显示不出来代替的文字 title：鼠标放在图片上提示的文字

<a>:超链接标签

1 2	<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a> target:_self(默认替换当前页面)、_blank(新窗口打开)

链接分类：

外部链接:例如<a href= "http://www.baidu.com">百度</a>
内部链接:网站内部页面之间的相互链接,直接链接内部页面名称即可,例如<a href="index.html">首页</a>
空链接：<a href="#">地址</a>，开发过程中
下载链接:如果href里面地址是一个文件.exe或者压缩包.zip,会下载这个文件

网页元素链接:在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接
<a href="http://www.baidu.com"><img src="img.jpg"/></a> 点击图片即可跳转
  
锚点链接:点击链接，可以快速定位到页面中的某个位置
在链接文本的href属性中,设置属性值为#名字的形式,如<a href="#two">第2集</a>
找到目标位置标签,里面添加一个id属性=刚才的名字, 如: <h3 id="two">第2集介绍</h3>

：注释标签，可在源代码中显示

特殊字符：在HTML页面中,一些特殊的符号很难或者不方便直接使用 ,此时我们就可以使用下面的字符来替代

表格标签:用来展示数据

<table>
	<tr>
		<th>姓名</th>
		<td>单元格内的文字</td>
		...
	</tr>
	...
</table>

1
2
3

<table>:定义表格，<tr>定义表格中的行，<td>：定义表格中的单元格。<th>表头标签。都是双标签
<thead> </thead> :用于定义表格的头部。<thead> 内部必须拥有<tr>标签。一般是位于第一行
<tbody> </tbody> :用于定义表格的主体,主要用于放数据本体

列表标签：用来布局

1、无序列表

<u1>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>

2、有序列表

<ol>
<1i>列表项1</li>
<li>列表项2</1i>
<1i>列表项3</li>
</o1>

3、自定义列表（重点）

<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</d1>

表单标签

目的：收集用户信息

组成：在HTML中,一个完整的表单通常由表单域、表单控件(也称为表单元素)和提示信息3个部分构成

1、表单域

表单域是一个包含表单元素的区域。在HTML标签中，<form> 标签用于定义表单域,以实现用户信息的收集和传递。<form>会把它范围内的表单元素信息提交给服务器，那么如果点击提交按钮就会跳转到url地址，如果是get，就会是xxx.php?pwd=x&username=X

1
2
3

<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>

2、表单控件

在表单域中可以定义各种表单元素,这些表单元素就是允许用户在表单中输入或者选择的内容控件。

(1) input输入表单元素

1	<input type="属性值" />

提交表单元素，value规定按钮中的文字内容

1	<input type="submit" value="免费注册">

button用来和js搭配使用，启动js脚本的动作

file上传文件

除了type属性外<input>标签的其他属性

name属性区分表单元素，单选和多选的每个表单元素需要有相同的name属性

checked主要针对单选和复选框，页面打开的时候默认选中

value在非选择框中规定输入框中默认的文字，在选择框中代表选择之后送到后台的内容

一个关于表单的测试

观察到url地址的变化，转到action指定的处理脚本路径，后面是对应的get传参，参数名就是前面input标签中定义的name属性值。但是由于我没有提前在网站根目录中创建login.php文件，所以显示无法找到

补充：<label>标签用于绑定一个表单元素当点击<label>内的文本时,浏览器就会自动将焦点(光标转到或者
选择对应的表单元素上用来增加用户体验

1
2
3

男<input type="radio" name="sex"/>
->
<label for="sex">男</label><input type="radio" name="sex" id="sex" />

id属性和label中的for属性需一致

（2）select下拉表单元素

<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</opt ion>
</select>

在<option>中定义selected =”selected”时,当前项即为默认选中项

（3）textarea 文本域元素

使用场景:当用户输入内容较多的情况下,我们就不能使用文本框表单了,此时我们可以使用该标签。评论、反馈

1
2
3

<textarea rows="3" cols="20">
默认文本内容
</textarea>

cols每行字符数，rows显示的行数

关于html常用的vscode插件
1、Auto Rename Tag:双击html的标签并修改会前后一起改变
2、One Dark Pro:一款颜色主题
3、系统自带格式化：设置->文本编辑器->格式化->勾上format on paste和format on save
4、open in browser ：可以在浏览器中显示页面
右键选择open in default browser在默认浏览器打开
5、Live Server(推荐) ：实时预览，但首先需要打开一个文件夹
右键选择open in Live Server，也是在浏览器中打开但和上面不同的是内容会随代码的改变而实时变化
6、Easy LESS ：我们写的less不能直接引入到html文件中，通过这个插件可以自动帮我们生成css文件
7、会了吧：英文翻译，点击左侧的会
8、vscode-icons 图标修改

vscode常用快捷键

ctrl + -/+ ：缩小放大代码
shift + alt + 下键：选中某行并复制到下一行
ctrl + d ：先双击选定一个单词，然后按下ctrl+d可以往下依次选择相同的单词，这样同时修改相同的单词就非常方便
ctrl + alt+ 上或下：添加多个光标，可以同时添加内容
ctrl + h：全局查找替换某个单词
ctrl + g：跳转到某行
shift + alt 然后拖动鼠标选中一个区块，可以一起删除
ctrl + / ：单行注释
自定义快捷键：左下角管理->键盘快捷方式，查找shift + alt + a(原本的多行注释快捷键)，点击修改，直接按键修改，回车就修改成功，那么多行注释就变成ctrl + shift + /

html常用标签

表格标签:用来展示数据

列表标签：用来布局

表单标签

一个关于表单的测试

javascript