前言:对于刚刚接触BS的我们来说,html是打开BS大门的第一把钥匙,由此可见html的重要性。那么我们就来看一看到底什么是html,以及html的相关常用标签。
一.什么是html
html:是用来描述网页的一种语言,是超文本标记语言。简单来说就是通过一些标记标签来书写网页,而html标签所搭建的是整个网页的结构骨架。
二.html标签
html是由一个个标签组成的,那到底什么是标签。
标签结构:<开始标签>内容</结束标签>
1.几种常用标签种类:
(1)标题标签(双标签):
<h1>一级标题</h1> ....... <h6>六级标题</h6>
h1-h6字体逐渐变小
注意:h1主要用于logo和新闻标题
(2)段落标签(双标签):
<p>这里是段落文字</p>
(3)换行标签(单标签):
<br>
(4)图片标签(单标签):
<img>
这里主要是强调一下<img>标签的常用属性:
src=目标图片路径;alt:当图片显示失败的时候显示的文本
title:鼠标放到图片上显示的文本;
width:设置图片宽度 ,height:设置图片高度
扩展:图片路径:分为相对路径和绝对路径
1.相对路径种类:
同级路径:图片和文件都在一个文件夹里./
下一级路径:图片在文件夹里边 ,文件在图片文件夹的外面 ./
上级路径:图片和文件都在各自的文件夹里 ../
2.绝对路径:具体的图片路径D:\百度\图片\1.jpeg
(5)超链接标签(双标签)
<a href="./目标网页.html" target="_blank">超链接</a>
_blank: 在新窗口跳转
(6)列表标签(双标签)
1>无序标签 (重点)
<ul>
<li></li>
</ul>
注意点:ul只能包含li,li可包含任何标签
2>有序标签:ol,li格式跟无序一样
3>自定义标签:
<dl>
<dt></dt>
<dd></dd>
</dl>
dl表示自定义列表的整体;dt表示列表主题,dd表示主题中每一项内容
(7)表格标签:
<table> /表格整体
<tr> /表格每行
<td></td>
<td></td> /表格单元格内容
</tr>
</table>
(8)表单标签(重点)
表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
1>input标签:
<input type =“text”>
radio单选框
属性:name:有相同name属性的单选框为一组,一组中同时只能有一个被选中
checked:默认选中
checkbox复选框
属性:checked:默认选中
file文件选择
属性:multipe :多文件选择
2>button标签
type属性值:
3>select下拉菜单
组成:select标签:下拉菜单的整体
option标签:下拉菜单的每一项
属性:selected:下拉菜单的默认选中
4>textarea文本域
属性:cols:规定了文本域可见宽度
rows:规定了文本域可见行数
5>lable标签
使用方法:
例子:
三.head标签
在head标签中可以包含所有的头部标签元素。可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。
1.<style></style>
在head标签中可以直接添加样式来渲染页面,也可以定义HTML文档的样式文件引用地址
2.<title></title>
定义不同文档的标题:
- 定义了浏览器工具栏的标题
- 当网页添加到收藏夹时,显示在收藏夹中的标题
- 显示在搜索引擎结果页面的标题
3.<base>
描述了基本的链接地址/链接目标,规定页面的所有打开方式
<base href="http://www.runoob.com/images/" target="_blank">
4.<link>
link标签通常用于链接到样式表
<link rel="stylesheet" type="text/css" href="mystyle.css">
四.文本格式化
文本格式化就是对文本进行加粗,倾斜等相关操作
标签 | 描述 |
---|---|
<b> | 定义粗体文本 |
<em> | 定义着重文本 |
<i> | 定义倾斜文本 |
<small> | 定义小号文本 |
<strong> | 定义加重语气 |
<sub> | 定义下标字 |
<sup> | 定义上标字 |
<ins> | 定义插入字 |
<del> | 定义删除字 |