html文件之标签
html文本就是有各种各样的标签组成的,标签会被浏览器实时的渲染成页面上的各种小组件。
html标签分类
-
单标签:有
<img/>
之类,其特点就是单个标签就闭合了 格式:<标签名 属性1=“属性值1” 属性2=“属性值2”…… />
-
双标签:有
<head></head>
等,除了标签,两个对应标签中间所包含的文本也是这个标签的内容,双标签之间也可以按照一定的方式嵌套,标签中塞标签 格式:<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
-
行内标签:只能存在于行中的标签,随内容的大小而定。
-
块级标签:自己独占一行,p标签为最小的块级标签。
一般来说块级标签可以包含行内标签和其他块级标签,但是p标签只能包含行内标签。
head标签内常见标签
1.title网页小标题
2.meta定义网页源信息(很多配置)
<!--百度搜索可以用到-->
<meta name="keywords" content="查询关键字">
<meta name="description" content="网页简介">
3.style内部支持编写css代码
<style>
h1 {
color: greenyellow;
}
</style>
4.link引入外部css文件
<link rel="stylesheet" href="mycss.css">
5.script支持内部编写js代码也可以引入外部js文件
<script>
prompt('好好活着','不要浪费生命')
</script>
<script src="myjs.js"></script>
body内常用标签
基础标签
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>
<p>段落标签</p>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<!--换行-->
<br>
<!--水平线--><hr>
特殊字符
内容 | 对应代码 |
---|---|
空格 | |
> | > |
< | < |
& | & |
¥ | ¥ |
版权© | © |
注册® | ® |
布局标签
-
div标签
div标签用来定义一个块级元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现。
-
span标签
span标签用来定义内联(行内)元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现。
这两个标签是帮助我们构建网页架构的,在搭建网页之前可以用这两种标签占位。
其他常用标签
img标签
<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息"
width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">
img常见的一些属性如上述代码所示。
a标签
超链接标签
所谓的超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序。
<a href="http://www.oldboyedu.com" target="_blank" >点我</a>
href属性指定目标网页地址。该地址可以有几种类型:
-
绝对URL - 指向另一个站点(比如 href="http://www.jd.com)
-
相对URL - 指当前站点中确切的路径(href="index.htm")
-
锚URL - 指向页面中的锚(href="#top")
号后面跟的是页面内的标签id,每个标签都可以添加id属性。
target:
- _blank表示在新标签页中打开目标网页
- _self表示在当前标签页中打开目标网页
其他标签
列表标签
-
无序列表(unordered list)
<ul type="disc"> <li>第一项</li> <li>第二项</li> </ul>
type属性,现在已经不会在html中设置我们列表的样式属性了,这些一般不会用,甚至pycharm中的html还会提示。因为无序列表很适合重复样式的一些标签,所以还算常用。
type属性
- disc(实心圆点,默认值) - circle(空心圆圈) - square(实心方块) - none(无样式)
-
有序列表(ordered list)
而有序列表就不怎么常用了,因为现在的网页都不会让html加数字序号这种的样式。
<ol type="1" start="2"> <li>第一项</li> <li>第二项</li> </ol>
type属性
- 1 数字列表,默认值 - A 大写字母 - a 小写字母 - Ⅰ大写罗马 - ⅰ小写罗马
-
标题列表(使用频率更低)
<dl> <dt>标题1</dt> <dd>内容1</dd> <dt>标题2</dt> <dd>内容1</dd> <dd>内容2</dd> </dl>
表格标签
表格是一个二维数据空间,一个表格由若干行组成,一个行又有若干单元格组成,单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式(即按行和列组织)的数据。
表格的基本结构:
1.先写基本骨架
<table>
<thead></thead>
<tbody></tbody>
</table>
2.再写表头及表单数据
<tr> 一个tr标签就表示一行
<th>编号</th> th主要用于表头字段中 用来加粗显示
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>1</td> td主要用于表达数据中
<td>jason</td>
<td>18</td>
</tr>
<table>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>jason</td>
<td>18</td>
</tr>
</tbody>
</table>
表格属性
- border: 表格边框.
- cellpadding: 内边距
- cellspacing: 外边距.
- width: 像素 百分比.(最好通过css来设置长宽)
- rowspan: 单元格竖跨多少行
- colspan: 单元格横跨多少列(即合并单元格)