HTML基本语法
时间:2021-07-13
本文章向大家介绍HTML基本语法,主要包括HTML基本语法使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1. 基本语法:
a. 标签的分类:
i. 双标签
1) 含义:成对儿出现的标签,有开始,有结束
2) 特点:
a) 有开始有结束
b) 标签名字需要放在尖角号里面
c) 双标签结束标记必须带/
d) 所有的属性和属性值都必须放在开始标签里面
e) 标签名字和属性之间必须带空格
f) 每一组属性和属性值结束后,也需要使用空格
g) 标签里面的属性和属性值需要使用=链接
h) 所有的属性都需要带引号
ii. 单标签
1) 含义:自己独立出现,没有结束标记
2) 特点:
a) 独立出现,没有结束
b) 标签名字和属性之间需要带空格
c) 属性和属性值之间使用等号链接
d) 属性值需要带引号
e) 单标签也放在尖角号里面
2. 特殊字符:
a. lorem:随机生成一段英文文本
b. 半角空格
c.   全角空格;这个空格能够代替一个文字的位置
d. < <
e. > >
f. © 圈C 版权符号
g. ® 圈R 商标
h. ™ ™商标
3. img
a. src路径:
i. 相对路径;
1) 相对于某一个文件夹之间的关系,查找对应的图片/文件
2) ./img/pic.png ./=当前目录
3) ../==返回上一级
ii. 绝对路径
1) 从某一个盘符地址开始,从互联网地址,网盘地址访问对应的图片
b. alt图片的描述:只有图片是破损文件时才会显示出来,会占页面空间
c. title="当鼠标放在对应的文本或者图片上面的时候提示文本",不占页面空间
4. 超链接标签:a
a. 作用
i. 跳转:不同页面之间的跳转;相同页面中的,不同区域的跳转(锚点)
1) 不同页面之间的跳转
跳转地址想要访问互联网地址的话则需要携带互联网http协议,
默认的跳转打开方式是在本页面中打开。
a) target="目标链接打开方式"
_self=====在本页面中打开
_blank===在新的空白页面打开
_parent==在父级框架打开
_top=====顶部框架打开
2) 相同页面之间的不同区域的跳转
a) 使用a标签实现锚点效果
b) 基本语法:
<a href="#锚点的名字">文本</a>
<div id="锚点的名字"></div>
5. 表格标签:
a. 表格的作用:用来展示数据信息的。后台管理系统经常使用
b. 表格的基本格式:
<table width="value" height="value" border="value">
<tr>
<td></td>
<td></td>
</tr>
</table>
注:一个tr表示一行,一个td表示一列,一个单元格
i. table的属性:
1) border
2) width:
a) 取值可以是%为单位的数值,占屏幕的百分比
b) 宽和高的单位如果为px为单位的数值,px单位可以省略
3) height:
a) 一般不可取%,因为body没有高度,是自适应的高度。不能直接设置高度,需要根据父元素是否有高决定。
4) 背景颜色==整个表格的背景颜色
a) bgcolor="red"
5) 边框颜色
a) bordercolor="颜色"
6) 表格的水平对齐方式
a) align="left/center/right"
7) 调整单元格和单元格之间的间距
a) cellspacing="0px" 是贴在一起,不是合并了,边框像素为2
8) 调整单元格和内容之间的间距
a) cellpadding="0px"
• 表格特点:如果没有设置对应的单元格的宽度的话,里面文本数量一致,则会均分,但凡里面内容多一点都会被撑大
9) 表格的外边框修饰
a) frame:
i) above:上边线
ii) below:下边线
iii) box/border:一圈的边框线
iv) hsides:上下边框线 使用频率较高
v) vsides:左右边框线
vi) lhs:左边框线
vii) rhs:右边框线
10) 表格内部的边线修饰:
a) rules
i) cols====纵向的线
ii) rows===横向的线 经常使用
iii) all=====所有的线(合并后的) 经常使用
iv) none===取消里面的边线
ii. tr的属性
1) bgcolor: 设置一整行单元格的背景颜色
2) height: 设置一整行单元格的高度
3) align: 设置一整行单元格里面内容的水平对齐方式
4) valign: 设置一整行单元格里面内容的垂直对齐方式
top/bottom/middle
默认情况下单元格内容是左侧垂直居中显示的
iii. td的属性: 单元格的属性,主要是对单元格的修饰
1) width:会影响单元格所在的一整行的宽度
2) height:会影响单元格所在的一整行的高度
3) bgcolor:只设置这一个单元格的背景颜色
4) align:只设置这一个单元格里面的内容的水平对齐方式
5) valign:只设置这一个单元格的垂直对齐方式
6) 合并单元格
a) 水平合并单元格:colspan="数值"
b) 垂直合并单元格:rowspan="数值"
c) 注意:一般不删除单元格,把单元格注释掉,防止混乱
越努力,越幸运
原文地址:https://www.cnblogs.com/Dqarden/p/15008280.html
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例