html标签
标签 == 标记
1.标签语法
双标签(常规标签): <标签名 属性名1:属性值1 属性名2:属性值2...> 标签内容 </标签名>
单标签: <标签名 属性名1:属性值1 属性名2:属性值2.../> 或者 <标签名 属性名1:属性值1 属性名2:属性值2...>
说明:
标签名 - 是html中已有的标签,不能自己随便命名。标签名和<以及标签名和/之间都不能有空隙
属性 - 属性和属性值之间用:连接,多个属性之间用空格隔开。所有的属性没有位置要求
标签内容 - 在开始标签和结束标签之间,标签的内容可以是任意的(可以文本也可以是其他标签)
2.head标签中的内容
head中的标签有:title,mate, base, link, style, script
title - 设置网页标题
meta - 设置网页元数据(单标签)
3.body
body中的标签主要用来在网页的内容中添加显示信息的
文本标签
2.段落标签 p
一个段落使用一个p标签,p标签会换行
-->
<p> JSON是一种取代XML的数据结构,和xml相比,它更小巧但描述能力却不差,由于它的小巧所以网络传输数据将减少更多流量从而加快速度,</p>
<p>那么,JSON到底是什么?</p>
3.特殊功能和符号
html中文本中的换行,空格,tab等都是无效的
换行:<br>
空格:
<p>
忽如一夜春风来,<br>
千树万树梨花开.<br>
</p>
4.字体相关标签
加粗:<b></b>,<strong></strong>
b标签只是单纯的文字效果加粗,strong标签有强调的意思
倾斜: i标签/em标签
i标签只是单纯的文字效果倾斜,em标签有强调的意思
<hr>水平线
列表标签
列表标签分为有序列表,无序标签,自定义列表
1.有序列表:
ol标签 --代表整个列表
li标签 -- 代表列表中的元素
2.无序列表:
ul标签 --代表整个列表
li标签 -- 代表列表中的元素
3.自定义列表
dl标签 -代表整个列表
dt标签 -分组名
dd标签 -分组的内容
图片和超链接
1.图片标签:img
单标签
a.src属性 - 图片地址(可以本地图片路径也可以说是网络图片url)
本地图片:地址可以是绝对路径也可以是相对路径,一般吧图片放在img文件夹中,然后写相对路径
b.title - 设置图片标题(鼠标停留在图片上,显示的内容)
c.alt 设置图片加载失败的提示信息
2.超链接标签:a标签
a.内容 -文字/图片
b.href -跳转的目标地址
c.target - 跳转方式
可以是文字超链接和图片超链接
href跳转到的目标地址
1.href可以跳转到网络地址
2.也可以跳到本地html文件地址
3.不写href可以刷新网页
4.可以选择器,跳转到指定的位置
target 跳转方式
_self - 默认值,在当前页面加载新的网页
_blank 创建一个新的窗口打开网页
数据表格
1.表格标签
table标签 -整个表格
tr - 行
td - 单元格(列)
2.边框相关属性
border - 边框的宽度设置的是最大的外面边框和里面的小边框
bordercolor - 背景颜色 传的可以是英语单词,也可以是RGB对应的16进制值
cellspacing - 单元格和单元格之间的间隙
cellpadding - 设置内容和单元格边框之间的间距
3.背景颜色属性
bgcolor - 背景颜色
a.作为table属性 - 设置整个表格的背景颜色
b.作为tr属性 - 设置一行的背景颜色
c.作为td属性 - 设置一个单元格的背景颜色
4.宽度和高度
width 和 height
a.作用与table - 设置整个表格的宽度和高度(会按比例分配每)
b.分别设置每一行的高度和宽度
5.对齐方式
align -center/left/right
a.作用于table,让整个表格在父标签中居中/左对齐/右对齐
b.作用于tr ,让整行的内容居中/左对齐/右对齐
c.作用于td,让指定的单元居中/左对齐/右对齐
应用:细线表格
第一步:设置整个表格的背景颜色(边框颜色) 和每个单元格的背景颜色(表格内容的颜色)不一样
第二步:设置cellspacing的值为边框的宽度
不规则表格
1.制作复杂表格的方法:
a.确定表格的最大行数用tr表示出来
b.确定每一行有多少个单元格(共用的单元格只算一次)
c.确定每一个单元格是否有合并现象,如果是行合并就设置rowspan的值,
如果是列合并就设置colspan的值
网友评论