前端入门教程（HTML+CSS+JavaScript）（1）

使用vscode

搭建好环境后（安装扩展HTML CSS  Support和Auto Rename Tag和Live Sever）

创建一个后缀为html的文件输入英文的叹号  ! 再点击TAB键之后可以自动填充基本框架

输入标签名称，再摁TAB键，可以自动填充<>

---

单标签

br换行

hr水平分割线

img 图像标签

input

---

双标签

1. <p>段落   更改文本样式 <b>字体加粗</b>  <i>斜体</i>  <u>下划线</u>   <s>删除线</s>
2. <h1>(数字越小标题越大，最小为6级)
3. <ol>有序列表  <ul>无序列表   每一行用<li>
4. <table>表格
5. <!--注释-->
6. <a>链接
7. div创建块以便布局             输入  .nav或者#nav再TAB键可快速输入（其中nav是导航栏的意思，可换成cotent）.对应属性是class    #是id
8. span(通常和css和js一块使用)方便进行修饰样式和标记
9. form表单的容器（lable为form专门的对应span）

---

HTML属性

用于定义元素的外观和行为，以及与其他元素的关系

属性值区分大小写，属性名称不区分大小写

鼠标放在属性上时可以查看解释

a

href：超链接的网址

target：新标签页的关系（_blank打开新的标签页）

img 

src：图像的文件途径和相对路径，或者文件的链接

alt：当图像无法显示时，显示的替换图像的文本

width，height:设置图像的大小

input

type：常用text用于输入文本内容。

          当为“radio”时为选项。为"checkbox"时为多选（此时也要加上name属性）

          当为password时不显示输入内容为小黑点显示

          当为submit时将表单的数据提交到后端或者服务器的特定位置（即form属性action的值），此时有个提交的框，若想显示其他的内容添加value的属性值，即想现实的内容。

 placeholder：显示输入框中的文字，当输入内容后消失

name:确定为一个属性，这样可以保证在“男，女和保密之间只能选一个”

lable

for属性一般与input的id属性相对应，id唯一。

块元素与行内元素

块：通常从新行开始，可包含其他块和行内元素。例：div,p,h1,ul,ol,li,table,form

行内：在同一行内呈现，不独占一行，不可包含块元素，但可包含其他行内元素，例：span,a,strong,em,img,br,input

表单