您的位置：首页 > Web前端 > HTML

Html学习笔记

2020-07-19 04:46 295 查看

标签学习

所有的样式修改都是用CSS，不在html中实现

1、文件标签：定义html文件的标签

html：html文档的根标签
head：头标签，用于指定html文档的一些属性。引入外部资源
title：标题标签
body：体标签
<!DOCTYPE html>：声明这是一个html文档

2、文本标签：定义文本的标签

<h1> to <h6>：不同粗细大小的标题
<p>：段落标签
<br/>：换行，自闭和标签
<hr>：一条水平线
color：颜色
color = “”
颜色的英文单词：green、yellow……
rgb(值1,值2,值3)：三原色组成
#值1值2值3：简化三原色组成
size：大小，单位px像素
width：宽度，单位px像素，可以用百分数表示，比如50%表示一半
align：对齐方式
<b>：加粗
<i>：倾斜
<font>：定义字体，已经被html5淘汰
color：颜色
color = “”
颜色的英文单词：green、yellow……
rgb(值1,值2,值3)：三原色组成
#值1值2值3：简化三原色组成
size：大小
face：字体
align：对齐方式
\center>：文本居中，已经被html5淘汰

3、图片标签：定义图片的标签

img：展示一张图片
相对路径：以.开头的路径例如
./：当前目录例如./image/xxx.jpg表示当前目录下image文件夹中的xxx文件
…/：上一级目录例如…/image/xxx.jpg表示上一级目录下image文件夹中的xxx文件
alt：定义图片加载失败时显示的信息

4、列表标签：定义列表的标签

有序列表：
ol
type：指定列表显示样式
1：1 2 3 4……
a：a b c d……
day02.A：day02.A day02.B C D……
……
li
无序列表：
ul
type：指定列表显示样式
disc：圆点
square：方块
circle：空心圆点
li

5、链接标签

a：定义一个超链接
href=“参数”,参数表示超链接点击访问资源的位置
target="_self/_blank/……",_self表示在本页面打开超链接,_blank表示在新的窗口打开超链接

6、HTML标签(块标签)

span：结合css使用，因为本身没有任何效果，所以比较好控制，白纸才比较好画画，span默认为一行，不换行
div：与span一样，但是每个div占满一整行

7、HTML标签(语义化标签)

将一个文档内相同标签作区分，增强可读性，同时方便css操作
header：页眉
footer：页脚
……

8、表格标签

table：定义一个表格
border：边框线宽度
cellpadding=“0”：定义单元格之间的距离，和spacing都设为0就是一条线
cellspacing=“0”：定义内容和单元格之间的距离，和padding都设为0就是一条线
bgcolor：定义背景色
align：定义位置，居中，左对齐等等
caption：定义表格标题
thead：表示表格的头部分，无意义，但是可以增强可读性，同时可以结合css使用
tbody：表示表格的体部分，无意义，但是可以增强可读性，同时可以结合css使用
tfoot：表示表格的尾部分，无意义，但是可以增强可读性，同时可以结合css使用
tr：定义行
bgcolor：定义背景色
align：定义位置，居中，左对齐等等
td：定义单元格
colspan：合并列
rowspan：合并行
th：定义表头单元格

9、表单标签(采集用户输入的数据)

form：定义一个范围，采集包裹的用户数据
action：保存采集到的数据的URL
method：指定提交方式
get：
一、请求参数会在地址栏中显示
二、请求参数的长度有限制
三、安全性较低
post：
一、请求参数不会在地址栏中显示，会封装在请求体中
二、请求参数的长度无限制
三、安全性较高
……
表单项中的数据要被提交，一定要定义name属性
input：输入框，可以通过type属性改变元素展示的样式
type：
text：输入文本
password：输入暗文
radio：单选框，实现单选效果多个单选框必须name相同
vlue：单选框提交的数据
checked：指定默认值
checkbox：多选框
vlue：单选框提交的数据
checked：指定默认值
file：文件选择框
hidden：用于提交一些隐藏信息
submit：提交按钮，提交表单信息
button：无意义按钮，和js结合实现特定效果
image：使用一张图片作为按钮，通过src指定图片路径
color：取色器
date：展示日期
datetime-local：展示详细的日期
email：邮箱，会进行基本的校验，例如没有@符号会报错
number：只能输入数字
placeholder：指定输入框的提示信息，输入数据后会自动消失
lable：点击包裹的文字是对应的输入框获取焦点，for属性和input的id属性值对应
select：下拉列表
option：定义列表项
value：提交的值
selected：定义默认值
textarea：文本域
cols：每行字符数
rows：行数

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航