前端

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

一、h系列的标签

h1-h6：标题标签

<h1>今天天气不错呀！</h1>

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

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

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

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

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

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

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

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

<font color="gray" size="2" face="宋体">本人菜鸟，多包涵！</font>

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

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

<hr/>

四、p标签（段落标签）

<p>好好写代码！</p>

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

五、br标签（换行标签）

<br/>

六、字体样式的一些标签

字体加粗：strong

斜体：em

下划线：ins

删除线：del

七、img标签

这是一个图片的标签

<img src="图片路径" alt="图片加载异常的时候显示的内容" title="鼠标停留在图片上显示的提示"/>

路径问题：

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

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

八、a标签（超链接）

1、实现页面直接的跳转

<a href="跳转到其他页面的相对路径/跳转到连接地址" title="鼠标停留时显示的提示" target="跳转的方式">点我</a>

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

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

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

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

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

点击之后就会回到顶部。

3、实现下载的功能

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

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

九、base标签

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

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

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

十、ul标签（无序列表）

<ul>

<li>商品名称</li>

<li>商品价格</li>

</ul>

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

<ol>

<li>商品名称</li>

<li>商品价格</li>

</ol>

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

<dl>

<dt>商品信息</dt>

<dd>名称</dd>

<dd>价格</dd>

<dt>商品规格</dt>

<dd>重量</dd>

<dd>热量</dd>

</dl>

十三、table标签（表格）

十四、input标签

1、输入框

<input type="text" placeholder="输入框默认提示的文字，我们输入时会消失" value="设置输入框的默认值" maxlength="允许输入的最大长度"/>

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

2、密码框

<input type="password"/>

3、单选框

<input type="radio" name="hobby" checked="checked"/>唱歌

<input type="radio" name="hobby"/>跳舞

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

checked属性：默认选中的标签

4、按钮

<input type="button" value="按钮上显示的内容"/>

5、多选框

<input type="checkbox"/>

6、提交按钮

<input type="submit"/>

7、重置按钮

<input type="reset"/>

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

8、图片提交

<input type="image"/>

9、文件上传按钮

<input type="file"/>

十五、select标签（下拉框）

<select>

<option selected="selected">选项一</option>

<option>选项二</option>

</select>

默认选择选项一

十六、textarea标签（文本域）

<textarea cols="20" rows="10"></textarea>

十七、form标签（表单）

<form></form>

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

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

属性：

action：指定数据提交地址

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

十八、meta标签

1、设置页面的编码格式

<meta charset="编码格式"/>

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

<meta name="keywords" content=""/>

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

<meta name="description" content="">

十九、div和span标签

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

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

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

二十、link标签

1、引入网站的图标

<link el=”shortcut icon” type=”image/x-icon” href=”图标的路径”>

2、引入css文件

<link rel=”stylesheet” href=”css文件的路径”>

3、dns预解析

<link rel="dns-prefetch" href="需要预解析的服务器的地址">

二十一、style和script标签

style标签：写css代码

script标签：写js代码

前端