在前面的几篇文章里,小编已经为大家展示了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:数据值
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
