前端基础学习【一】: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代码