在前面的几篇文章里,小编已经为大家展示了html的基础标签,这篇文章就来谈谈在没有CSS,JS 的加持下,我们如果给我们制作的网页添加一些不一样的烟火。
一.HTML的基本语法:
1.常规标记:常规标记又称双标记
<标记> </标记>
<标记 属性="属性值" 属性="属性值"> </标记>
注:标记也可以叫标签或元素
2.空标记:空标记又称为单标记
<标记/>
<标记 属性="属性值" />
细心的小伙伴肯定会发现上述有颜色不同的文字,而这些颜色不同的文字正式今天小编要说的重点内容!
我们之前提过有关Web前端的构成,HTML负责网页的架构;CSS负责网页的样式,美化;JS负责网页的行为,而如果我们不使用css能不能做出好看一点的网页,答案是可以的,我们用下划线举个例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<hr/>
<hr/>
<hr/>
</body>
</html>
我们尝试运行一下上述代码
我们发现他就是平平无奇的三个下划线,大家记住这个网页现在的样子,魔术正式开始
我们发现后面的比起上一个网页更有色彩感,而且下划线的长度也发生了改变,那是因为标签属性的增加使我们的网页产生了变化,后述代码段如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<hr color="red" align="left" width="90"/>
<hr color="blue" align="left" width="180"/>
<hr color="green" align="left" width="270"/>
</body>
</html>
二.HTML中常用的属性:
1.<hr>常用属性:
size属性:调节下划线的高度
color属性:调节下划线的颜色
align属性:调节下划线对齐方式;left right
noshade:取消下划线阴影
注:px为像素单位
2.字体常用属性:
size属性:设置字体大小;可使用值1~7,浏览器默认字体为3,若设置大小大于7,都是按照7进行显示
face属性:设置文字的字体
字体颜色(非CSS):
<font color="#xxxxxx"></font>标签:
在html中我们引入<font></font>标签来帮助我们改变字体颜色
#xxxxxx表示使用红绿蓝原色设置颜色,红绿蓝分别取值00-FF,我们使用十六进制
例如:
#000000 白色 | #FFFFFF 黑色 |
#0000FF 蓝色 #00F | #00FF00 绿色 #0F0 |
#FF0000 红色 #F00 |
红绿蓝三种原色有简单的写法;#xxxxxx表示的颜色不止小编举的这些,感兴趣的小伙伴可上网自行寻找
3.<img>标签的属性:<img src="图片的路径地址"/>
src属性(图片的路径地址):表示图片的路径,一般使用当前服务器,也可以使用其他服务器, 必须有http://协议
width(宽度):如果只设置一项,图片会等比缩放
height(高度):更改图片高度
title(提示文本):鼠标悬停在图片时出现的文字信息
alt(替换文本):图片加载失败时出现的文字信息
border(边框):定义边框的粗细 例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="RR-C.jfif" alt="蒙娜丽萨的微笑,请尝试刷新页面" title="蒙娜丽萨的微笑"><!--错误示例-->
<img src="R-C.jfif" title="蒙娜丽萨的微笑">
<img src="R-C.jfif" width="300px" height="300px">
<img src="R-C.jfif" width="200px">
</body>
</html>
我们尝试运行上述代码
扩展:绝对路径与相对路径:
我们做一个假设,假设我们C盘有一个文件夹---HTML,在此文件夹里有两个文件file1和file2
我们让文件filel说出文件file2的位置(也就是路径),那么它有两种表示方法:
第一种:C:\HTML\file2 这就是绝对路径
指明file2文HTML文件下,从最大的目录C盘开始表示出来。
第二种:file2 这就是相对路径
因为filel文件和 file2文件都在C:\HTML下,所以它们的路径前面"C:\HTML"都是一样,就不用
表示出来了。
如果filel和file2不在同一个文件夹下,相对路径如下表示:
filel的位置为:C:\HTML\path1\file1
file2的位置为C:\HTML\path2\file2
这时候让file1说出file2的位置则为:../path2/file2【两个点(..)表示回退一层】
也就是说file1在path1文件夹下,先退回到HTML文件,然后再去path2/file2,这就是相对路径
4.<ul><ol>标签的属性:
1)<ul>属性:
type="circle":空心圆
type="disc":默认值,黑色实心圆
type="square":黑色实心正方形
2)<ol>属性:
type="1":默认值,1,2,3......
type="a":小写英文字母,a,b,c......
type="A":大写的英文字母,A,B,C......
type="i":小写的罗马字母,i,ii,iii......
type="I"大写的罗马字母,Ⅰ,Ⅱ,Ⅲ......
注意:属性type写在ol ul身上是改变所有li,写在li身上是改变单个li
5.超链接属性:
href:用于确定需要显示页面的路径
target:确定以何种方式打开链接:_blank:新窗口打开
_self:本页覆盖打开
6.<table>标签的属性:
<table>:
border:表格边框的宽度
width:表格的宽度
height:表格的高度
cellpadding:单元格边缘与内容的空白
cellspacing:单元格之间的空白
bgcolor【background color】:表格的背景颜色
标题:<caption>表格标题的内容</caption>
<tr>行:
height:高度
bgcolor:背景颜色
align:水平方式:left right center
valign:垂直对齐:top middle bottom
<td>列:
width:宽度
bgcolor:背景颜色
align:水平方式:left right center
valign:垂直对齐:top middle bottom
colspan:单元格可横跨的列数(横向合并单元格)
rowspon:单元格可横跨的行数(纵向合并单元格)
7.<type>标签的属性:
<form action="服务器地址" method="get/post">
<input type=" " name=" " value=" "/>
</form>
指定表单控件的类型:text:普通文本
password:密码输入框
radio:单选框
checkbox:多选框
file:上传文件
image:图片提交按钮 通过src设置图片
hidden:隐藏
button:普通按钮,需要value按钮表明内容
reset:重置按钮
submit :提交按钮
size:输入框大小
name:设置input标签的名称
value:数据值