前端基础学习【一】：HTML的一些基本的标签

一、h系列的标签

h1-h6：标题标签

今天天气不错呀！

上面是从h1到h6标签的页面显示形式，可以发现h标签有字体加粗的效果

普通文本的字体大小跟h4是一样的。

注意：不要用标题标签来给文本做加粗效果。

二、font标签（h5已经禁用）

font标签是一个字体标签，可以给标签中添加一些属性，达到自己想要的字体形式。

标签的属性：用来描述标签的特征。

标签属性的书写格式：属性名=“属性值”，每个属性用空格分开

font中常用的属性：color，size（1-7,3正常），face（指定文本的字体）

本人菜鸟，多包涵！

三、hr标签（水平线标签）

hr标签是一个单标签，最后的斜杠可有可无。

---

四、p标签（段落标签）

好好写代码！

p标签的特点：让文字成为段落，并且有明显的段落间距。

五、br标签（换行标签）

六、字体样式的一些标签

字体加粗：strong

斜体：em

下划线：ins

删除线：del

七、img标签

这是一个图片的标签

路径问题：

1、绝对路径：从计算机的盘符就开始计算

2、相对路径：从一个文件到另一个文件经过的文件夹+目标文件的文件名+后缀名

八、a标签（超链接）

1、实现页面直接的跳转

点我

target：跳转的方式。_blank：在新的窗口打开页面；_self：在当前页面进行跳转

2、使用a标签在页面上定位标签

应用场景：在页面中经常见到的---回到顶部

在顶部定义一个标签，并且标签中要有id；

在底部写一个a标签，href中写#+id；

点击之后就会回到顶部。

3、实现下载的功能

在href中输入 文件的相对路径 即可

注意：这种方式已经用的很少了，并且浏览器认识文件格式的话，就会直接在浏览器中打开那个文件。

九、base标签

base标签作用：统一设置该页面中a标签的跳转方式。

base标签的用法：在head标签中写，它是一个单标签。

base标签的前提：页面中的a标签中没有设置target属性。

十、ul标签（无序列表）

   

• 商品名称

     

• 商品价格

十一、ol标签（有序列表）

     

1. 商品名称

     

2. 商品价格

十二、dl标签（自定义列表）

商品信息

名称

价格

商品规格

重量

热量

十三、table标签（表格）

十四、input标签

1、输入框

注意：value属性会覆盖placeholder属性。

2、密码框

3、单选框

唱歌

跳舞

name属性：属性相同的为一组，进行单选

checked属性：默认选中的标签

4、按钮

5、多选框

6、提交按钮

7、重置按钮

注意：重置按钮必须在form表单中

8、图片提交

9、文件上传按钮

十五、select标签（下拉框）

   

选项一

   

选项二

默认选择选项一

十六、textarea标签（文本域）

十七、form标签（表单）

表单：用来收集信息，装表单控件

表单控件：给用户输入或者交互用的标签

属性：

action：指定数据提交地址

method：指定提交数据的方法：post提交数据量小，不安全；get：提交数据量大，安全。

十八、meta标签

1、设置页面的编码格式

2、设置页面的关键字：做搜索引擎的优化

3、设置页面的描述：做搜索引擎的优化

十九、div和span标签

div：是一个占据一整行的容器

span：是一个自适应内容多少的容器

注意：这两个标签没有语义化

二十、link标签

1、引入网站的图标

2、引入css文件

3、dns预解析

二十一、style和script标签

style标签：写css代码

script标签：写js代码

二十二、图书符号的表示

---

---

本人是一名很普通，很渣渣的程序猿，有些知识也不会，文章内容只是自己的一点点总结，没有完整性可言，仅供参考，有什么问题欢迎留言，共同学习，进步。另，随意转载，我写博客只是为了总结总结，逼迫自己学习。谢谢！