web前端学习（北京林业大学mooc课程）——1、html基础

sublime text  安装emmet插件 工程级文件的话 webStorm

英文状态下! tab 或者 ctr +e 扩展，生成网页文件结构

a*3 扩展 生成三个a标签

一、html基本概念

1、标签：在尖括号中被括起来的部分。通常成对出现，也会单独出现。

例如：

  单独出现的标签，由一个斜杠作为日其结束：

2、元素：标签与标签内的内容构成一个元素。

例如：

3、属性：在标签的内部除了有标签的名字外还有标签的属性。

例如：

二、html文件结构

index.html/index.htm

三、html标签

1、标题：h1 ~h6   段落：p(块级元素）  段内换行：
  空格：  

：预留格式标签，其内的空格和换行都会被保留  组合行内元素  组合表签内的元素，以便通过css样式来格式化，如

adhaoakdj

水平线

---

2、超链接a 文字或者图片 ，文字或者图片

a是行内元素，可以放在p里，或者

3、

绝对路径：从盘符开始的路径

相对路径：以当前网页文件所在的文件夹作为基准

4、区域

5、无序列表 ul 列表项 li ul>li*3

6、有序列表 ol 列表项 li

7、表格 ：

行： 每行的单元格： 表头：

例如：

姓名	年级	班级
张三	4年假	5班

8、表单：是一个区域，添加表单元素，采集用户提交的信息。表单标签：

这里添加保单元素

表单元素：①文本框、密码框

name属性作用，表单提交信息给后端后，后端需要知道是哪个表单元素提交的数据，通过name就可以知道

②按钮

提交按钮

重置按钮

③单选框和多选框

男

女

value是这一项的内容是什么，单选框的两个name属性要相同，这样才会两个里选仅一个

音乐

艺术

……

④下拉列表框

足球

篮球

⑤文本域

在这里输入内容

四、sublime的基本操作

1、alt+shift+1/2，分屏/单屏

2、行号左侧有个向下的箭头，可以折叠代码

3、ctrl+D选择一个单词 Ctrl+L选择一行 多处选择：按下ctrl，鼠标多处点击，光标会在多处闪烁，可以同时进行编辑

4、ctrl+N新建文件，然后按照html文件的格式保存ctrl+s 英文! tab 或ctrl e扩展，生成HTML文件的基本结构

5、生成注释：选择代码，ctrl+/生成注释，ctrl+shift+/撤销注释

6、标签的扩展：img扩展，会将属性也补充好  p{这里输入段落的内容}扩展，会生成正确的包含内容的标签，img[src=p.jig]扩展，属性也扩展出来了

7、标签的嵌套

p>span扩展，p是上级标签，span是下级标签   p>img+a img和a是同级标签

8、标签的分组

(div>p)+(div>img)扩展

9、快速生成多个元素 ul>li*3