HTML常用标签及css常用属性

Posted 2022-08-12 fuyi2345

html hyper text mark up language 扩展名是.html

title : 标题标签
body ： 内容标签

h1 - h6 : 标题标签 自h1 到 h6 从大到小 加粗有自己的间距
p ： 段落标签
字符实体 ：
  空格
> 大于
&lt； 小于
br ： 换行 规范写法 <br />

div : 块标签 ，表示一块内容 并没有语义
span ： 行便签 ， 表示一行中的内容
这两个的作用为设置样式的时候使用

行内元素 ，语义标签
em : 语气强调词
i ： 专业词汇
b ： 关键词或者产品名
strong ：表示重要的内容

图片标签
img ：图片标签
属性 src 引用图片的地址
属性 alt 定义图片的名称

链接 a标签
href ： 链接地址
# 链接到本页的顶部
title ： 鼠标悬停的提示文本框
target ： 定义链接窗口打开位置
self ： 原位置
blank ： 新窗口 打开一个浏览器窗口


列表标签
有序列表 <ol><li>有序列表</li></ol>
一般用于排序有编号
无序列表 <ul><li>无序列表</li></ul>
一般用于新闻界面
定义列表
<dl>
<dt>定义术语题目</dt>
<dd>定于术语解释</dd>
</dl>

表格标签
table : 表格标签
border ： 定义表格边框
cellpadding ： 定义单元格与内容之间距离
cellspacing ： 定义单元格与单元格之间距离
align ： 定义对齐方式 left | center | right
tr ： 行标签
th ：表头单元格
td ：普通单元格
align ： 定义对齐方式 left | center | right
valign ： 定义垂直对齐方式 top | middle | bottom
colspan ： 设置单元格水平合并 设置值为数值
rowspan ： 设置单元格垂直合并 设置值为数值

 

注意
p标签和p标签之间自动换行
div和div之间不换行

div可以嵌套 别的标签最好不要嵌套

h1标签为标题 爬虫爬这个
p标签为段落

 

表单 form
form的属性
action ：提交的地址
method ： 提交方式 默认为GET

label ： 输入框前的内容 文字
for ：点用户名自动切换到文本框 要在input 表单中设置id="xxx"

textarea ： 多行文本输入框

下拉文本框
<select >
<option>下拉1</option>
<option>下拉2</option>
</select>

 

<input ... >
属性
type ： 类型
text ： 文本输入框
password ： 密码输入框
radio ： 单选框
checkbox ： 多选框 value要自己设置
file ： 文件
submit : 提交 value ：上显文字
reset ： 重置按钮
image ： 定义图片作为提交按钮 src 定义图片地址 不建议使用
hidden ： 定义一个隐藏表单域 用来储存值 比如储存时间 地区

name ：昵称 单选框选择一个就不能选第二个

 

css出现之后 html只用来设置结构 css定义样式
引入方式

外联式：
<link rel="stylesheet" type="text/css" href="地址">
样式表 类型 .css 的文件地址

嵌入式：首页使用的技巧
<style type="text/css">
指定样式的标签
样式..............

</style>

内嵌式 行内插入：（不推荐）
<a href="www.baidu.com" style="样式">百度</a>

css 样式属性
font-size ：文字大小 20px

color ：颜色 red

font-family ：文字字体 Microsoft yahei 微软雅黑

font-style ： 文字是否倾斜
italic 倾斜 em会自动倾斜
normal 不倾斜

font-weight ： 文字是否加粗 h1等标签默认加粗
bold ：加粗
normal ： 不加粗

line-height ： 行高

font ： 综合属性 是否加粗 字号 行高 字体按照顺序排列

text-decoration ： 设置下划线 underline 有下划线 | none 去掉下划线

text-indent ： 首行缩进 2字就是 字体大小*2

text-align ： 对齐方式 left | center | right