html学习记录(一)
本文最后更新于110 天前,其中的信息可能已经过时,如有错误请发送邮件到619701626@qq.com

超链接<a>

<a></a>

超链接属性target

_self 当前页
_black 空白页 默认

文本修饰常用标签

加粗

bstrong

<b></b>  
<strong>

效果:

加粗
加粗

倾斜

iem

<i></i>  
<em></em>

效果:

倾斜
倾斜

删除线

sdel

<s></s>  
<del></del>✔

效果:

删除线
删除线

HTML5已经不支持 s 标签

下划线

u

<u></u>  

效果:

下划线

角标

supsub

xxx<sup> x
xxx<sub> x

效果:

角标
角标

列表标签

有序列表

olli

<ol>
    <li>把冰箱门打开</li>
    <li>把大象放进去</li>
    <li>把冰箱门关上</li>
</ol>

效果:

  1. 把冰箱门打开
  2. 把大象放进去
  3. 把冰箱门关上

type属性:设置列表项目的符号

需要记住5种常用A,a,I,i,1
A,a:英文字母顺序
I,i:罗马字母顺序
1:阿拉伯数字顺序

<ol type=''></ol>

效果:

  1. 把冰箱门打开
  2. 把大象放进去
  3. 把冰箱门关上

start属性:开始首个顺序,start取值是数字序号,不需要加任何单位
start='6',会从第6个开始

<ol start=''></ol>

效果:

  1. 把冰箱门打开
  2. 把大象放进去
  3. 把冰箱门关上

无序列表

指列表项中的内容,是没有时间、空间或者逻辑等顺序要求的

ulli

<ul>
    <li>把冰箱门打开</li>
    <li>把大象放进去</li>
    <li>把冰箱门关上</li>
</ul>

效果:

    • 把冰箱门打开
    • 把大象放进去
    • 把冰箱门关上

alt+上下键换顺序

无序列表同样有type属性,有四个
disc:实心圆点 type默认值
circle:空心圆点
none:隐藏项目
square:实心方点

自定义列表

dldtdd,都为双标签语法
dl:定义列表
dt:定义术语,可以理解为列表标题
dd:定位描述,可以理解为列表内容

<dl>
    <dt></dt>
    <dd></dd>
    <dd></dd>
</dl>

dtdddl的子标签
dtdd为兄弟标签,dt不能放在dd内,反之亦如此
dtdd不能脱离dl使用

<dl>
    <dt>问:英语不好能学编程吗</dt>
    <dd>答:没问题</dd>
</dl>

效果:

问:英语不好能学编程吗
答:没问题

缩进是浏览器默认样式

列表标签快捷键

Emmet工具

<h1>工具</h1>                   这样输入很慢
h1{工具} + tab键或者回车键       可以直接生成

alt + b 直接在浏览器中运行

任意合法HTML标签都可以使用Emmet来实现代码自动补全

生成多个一样的标签

标签名{标签文本内容}*标签重复次数
h1{工具}*3

如果要实现多个带项目符号

标签${标题文$本内容}*标签重复次数
h${这是$级}*3

图片

嵌套标签

如果要实现以下效果

<ul>
    <li>这是ul里面的li</li>
    <li>这是ul里面的li</li>
    <li>这是ul里面的li</li>
    <li>这是ul里面的li</li>
    <li>这是ul里面的li</li>
</ul>

Emmet的语法为:

父标签名>子标签名{子标签文本}*子标签重复次数
ul>li{这是ul里面的li}*5

拓展

表格 <table>

表格基础标签都遵循双标签的基本结构

行标签 <tr>

单元格 <td>

构成最基本的表格结构

<table>
    <tr>
        <td></td>
    </tr>
</table>

table标签修饰属性

<th>: 表头单元格,加粗并居中显示

快捷键ctrl+鼠标左键不能多选多个光标
实际上是alt+鼠标左键可以多选光标

表格线

表格线的属性是<border=>,用来定义线条的粗细

表格的总宽度属性为:<width>

表格的总高度属性为:<hight>

<table border="1/2/3" width="数值" hight="数值">  </table>

间距属性

cellspacing:单元格之间的距离 , 间与间

cellpadding:单元格边框和文本之间的距离 , 框与字

居中属性

align:”left”、”center”、”right”

用于表格 左对齐、居中对齐、右对齐

表格颜色

bgcolor:用来修饰表格的背景颜色
bordercolor:用来修饰表格的边框颜色

tr标签属性

<table>
    <tr hight="">

    </tr>
</table>

hight属性增加高度不改变table的高度,其他单元格会均分表格宽度和高度

根据W3C官方公布的tr属性中,是没有宽度属性的

bgcolor属性用来设置tr的背景颜色

对齐方式属性

align:水平对齐方式,取值有 left 、center 、 right

valign:垂直对齐方式,取值有 top 、middle 、 bottom

单元格td属性

width单元格宽度、hight单元格高度、bgcolor单元格背景颜色

修改widthhight会影响这一列的单元格宽度、高度

td里也有alignvalign属性

align:水平对齐方式,取值有 left 、center 、 right

valign:垂直对齐方式,取值有 top 、middle 、 bottom

合并单元格属性

rowspan 为行合并,值为合并行的总数,意为纵向占x个单元格

colsoan 为列合并,值为合并列的总数,意为横向占x个单元格

表格标题和结构分组

表格标题

caption 说明文字

一般习惯放置在第一个tr标签之前

<table>
    <caption>标题<caption>
    <tr></tr>
</table>

结构分组

行分组标签

theadtbodytfoot 均为双标签
分别表示 表格头 、 表格体 、 表格尾

<table>
    <thead></thead>
    <tbody></tbody>
    <tfoot></tfoot>
</table>

列也可以分组
colgroup 常用于定义表格一整列单元格的颜色

<colgroup span=""></colgroup>

其中span属性取值为一个数值,含义为多少列分为一组

如果需要划分多组,则需要多个colgroup标签

颜色值和长度单位

颜色值

1、red,green,green这些130种,但只能是130种的
2、十六进制,比如 #ffffff
3、RGB(255,0,0)

长度单位

绝对单位和相对单位

比如1px 和 100%

px可以省略不写,浏览器渲染会默认用px来渲染

块级元素和内联元素

div块
span 范围

内联元素里面不能嵌套块级元素

块级元素有:table p h1-h6 tr

内联元素有:a b strong i sub em sub sup

觉得有帮助可以鼓励下博主哦~感谢!
作者:rainy
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0协议
转载请注明文章地址及作者哦~
上一篇
下一篇