【前端】HTML

爱敲代码的菜菜

已于 2024-03-12 19:55:48 修改

阅读量675

点赞数 6

分类专栏：前端文章标签：前端

于 2024-03-04 13:40:07 首次发布

本文链接：https://blog.csdn.net/qq_74455045/article/details/136395575

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

！+ 回车 = 快速生成代码框架
lang 语言
charset 浏览器解码规则

1.HTML标签

注释标签：ctrl + /

标题标签：<h1></h1> - h6 数字越大，字体越小

段落标签： 标签内回车解析为空格

换行标签： 或 <br'>

2.格式化标签

加粗： 或

倾斜： 或

删除线：<del></del> 或 <s></s>

下划线：<ins></ins> 或

3.img标签_src属性

img必须搭配src使用，src指定图片路径

<img src="绝对路径 / 相对路径" alt="图片无法显示" title="这是一张图片" width="10px" border="4px">

alt：替换文本，当文本不能正确显示时会显示一个替换的文字
title：提示文本，鼠标放到图片上会有提示
width/height：控制高度宽度，改一个就行，另一个会等比例缩放
border：边框，参数是宽度的像素

4.a标签

4.1href属性

超链接

<a href="https://www.baidu.com/">跳转到百度</a>

<a href="#">在当前页面</a>

4.2target属性

打开方式默认为_self，如果是_blank则用新的标签页打开

5.表格标签

table：表示整个表格，其后设置表格参数
tr：表示表格的一行
td：表示一个单元格
th：表示表头单元格，会居中加粗，指一个
thead：表格的头部区域，指一行

表格参数

align：表格整体相对于周围元素的对齐方式，align="center/right/left"
border：边框 ""表示没边框
cellpadding：内容距离边框的距离
cellspacing：单元格之间的距离
width/height：设置尺寸

<body>
    <table border="2px">
        <tr align="center">
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
            <td>年级</td>
        </tr>
        <tr align="left">
            <td>张三</td>
            <td>男</td>
            <td>19</td>
            <td>大二</td>
        </tr>
        <tr align="center">
            <td>李四</td>
            <td>男</td>
            <td>22</td>
            <td>大四</td>
        </tr>
        <tr align="right">
            <td>王五</td>
            <td>女</td>
            <td>18</td>
            <td>大一</td>
        </tr>
    </table>
</body>

单元格合并：colspan (跨列合并)、rowspan (跨行合并)

被合并的行或列要删去

<body>
    <table width="100px" border="2px">
        <tr align="center">
            <td colspan="2">1</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr align="center">
            <td rowspan="2">5</td>
            <td>6</td>
            <td rowspan="2" colspan="2">7</td>
        </tr>
        <tr align="center">
            <td>10</td>
        </tr>
    </table>
</body>

6.列表标签

6.1无序列表

快速生成列表： ul>li*4 + 回车 = 4行无序列表

无序列表属性：

type属性：写在ul后，type="disc/square/circle" ，更改序列形状

6.2有序列表

快速生成列表： ol>li*4 + 回车 = 4行有序列表

有序列表属性：

type属性：写在ol后，type="a/A/i/I/1" ，更改序列形状

其中 a/A:小/大写英文字母 i/I:小/大写罗马数字 1:数字编号(默认)

start属性：start="2"，编号从2开始

<body>
    <ol start="7" type="I" reversed="reversed">
        <li>大一</li>
        <li>大二</li>
        <li>大三</li>
        <li>大四</li>
    </ol>
    <ul>
        <li>春眠不觉晓</li>
        <li>处处闻啼鸟</li>
        <li>夜来风雨声</li>
        <li>花落知多少</li>
    </ul>
</body>

6.3自定义列表--表单标签

快速生成列表： dl>dt>dd*4 + 回车 = 4行列表

dt后为自定义列表标题

表单标签：完成和服务器的一次交互

表单域：包含表单元素的区域，form标签

<form action="https://www.baidu.com/"> </form>

表单控件：输入框，提交按钮等，input标签，写在form标签内

姓名<input type="text"> /*文本框*/
密码<input type="password"> /*密码框*/
性别<input type="radio" name="gender">男 /*单选框*/
   <input type="radio" name="gender" checked="checked">女
爱好<input type="checkbox">画画 /*复选框*/
    <input type="checkbox">唱歌
/*按钮框*/
<input type="button" value="我是个按钮" onclick="alert('hello')"> /*普通按钮*/
<input type="submit" value="提交" name="course"> /*提交按钮*/
<input type="reset" value="清空"> /*清空按钮*/
<input type="file"> /*选择文件*/

7.lable标签_for属性

写在单选框或复选框代码前，点击“文字”效果等同于点击“框”

8.select标签_option属性

下拉选择，使用selected设置默认选项

9.texarea标签

长文本框

<texarea name="" id="" cols="30" rows="10"></texarea>

10.无语义标签

没有固定的用途，啥都可以干

div独占一行，span不独占一行

<div>

    <span>吃饭</span>

    <span>睡觉</span>

</div>

<div>吃饭</div>

<div>睡觉</div>

11.特殊字符

空格： 

小于号：<

大于号：>

按位与：&

爱敲代码的菜菜

关注

6
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录