html基础

最新推荐文章于 2024-07-21 17:58:14 发布

write__code__

最新推荐文章于 2024-07-21 17:58:14 发布

阅读量817

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/write__code__/article/details/123933492

版权

块级标签

div
p
h1-h6

行内标签

span
strong
img

2.基本标签

1.文本样式标签:

文本样式标签都是行内标签

加粗
- strong
- b
倾斜
- em
- i
删除
- del
- s
下划线
- ins
- u
上下标
- sub 下标
- sup 上标

区别:

语义化含义:strong em delins sub sup 视觉效果:b i s u

2.`img`标签

标签属性
- src图片地址
- alt 图片错误提示
- title 图片名字
- width 设置宽度
- height 设置高度
注意:

图片设置宽高通常只设置一个,这样图片可以等比例缩放

如果使用标签属性为img设置宽高无需添加单位默认px

3.`a` 标签

标签属性
- href 超链接网页
- target目标打开方式
  - _blank 新标签
  - _parent在框架里面使用
  - _self 默认值在当前页面打开
  - _top 在框架里面使用
空标签

<a href="#">空连接</a>会在目标连接上拼个#号

<a href="javascript:viod(0);">空连接</a>才是真正意义上的空连接

<a href="javascript:;">空连接</a>简写
锚点定位

给目标内容设置id

利用

<a href="#id名字">跳转到目标位置</a>

3.三表

1.列表

有序

ol li

无序

ul li

注意事项:

ul ol中不可以写p类等标签，

除li标签都不可以嵌套，可以再li里面嵌套

定义列表

结构

        <dt>安居乐业</dt>
        <dd>安定的生活,愉快的工作</dd>
        <!-- <div>不能这样嵌套使用</div>
        <p>这样也不行</p> -->
        <dd>
            <p>内容2</p>
        </dd>
    </dl>

注意事项:

dd标签里面不能嵌套使用div标签和p 标签

dl标签里面可以嵌套一个dt,n个dd

2.表格

1.主要标签

table,caption[表头],thead,tbody,tfood,th,tr,td

2.具体结构

<table>
    <caption>...</caption>
    <thead>
        <tr>
            <th>...</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>...</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>...</td>
        </tr>
    </tfoot>
</table>

3.属性

border 边框
cellspacing单元格空隙
cellpadding 单元格
width 宽度
height 高度
align 对齐方式
- center居中
- right 右对齐
- left 左对齐
colspan 跨列合并
rowspan 跨行合并

4.样式

border-spacing:0;去掉单元格间距
border-collapse:collapse;合并单元格边框

3.表单

input输入框主要属性

text文本
password密码
label设置可选空间
radio 单选项
checkbox复选项
- cheked默认选项
四个按钮
- button普通按钮
- submit提交按钮
- reset重置按钮将页面内容重置,并将信息拼至路径
- image 图片按钮点击自动刷新页面

4.文本样式

字体样式

color:颜色
font-family: "宋体";字体类型
font-size: 30px;字体大小
font-weight: bold;加粗
font-style: italic;倾斜

文段样式

text-decoration: underline;下划线
text-align: center;居中
em

相对单位,相当于一个font-size大小
text-indent: 2em;首行缩进两个字符
line-height行高
text-transform: lowercase;转换字母大小写

加粗和倾斜也可以用于恢复正常

font-size: normal;

font-weight: normal;
letter-spacing字符间距
word-spacing单词间距(英文单词)