前端笔记（自用）

最新推荐文章于 2024-10-11 19:03:40 发布

遥香小可爱

最新推荐文章于 2024-10-11 19:03:40 发布

阅读量606

点赞数 7

文章标签：前端笔记

本文链接：https://blog.csdn.net/2301_81204159/article/details/136323949

版权

1、常用标签

strong、b标签-----加粗

br标签是用来换行------- 单标签

hr ------- 水平分割线，单标签，可以设置width属性表示的水平分割线的长度，size属性设置的粗细

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>常用标签</title>
 </head>
 <body>
ahh啊哈哈<br>
啊哈哈
<hr width="800px" size="10">
 </body>
 </html>

p标签段落标签

align属性 ------ 位置 left center right,默认值是left

font标签 ------ 这是字体

color属性：颜色

颜色的表示法：英文单词 red black pink

#rrggbb 三原色 red green blue

     <p align = "left">
    这是一个段落
    </p>

    <p align = "center">
        这是一个段落
    </p>
    <p align = "right">
        这是一个段落
    </p>
    <p >
        这是一个段落
    </p>
    <p>
        <font color ="#006600">这是字体标签</font>
    </p>

hn和div标签

hn指的是h1,h2,h3,h4,h5,h6 ----- 标题标签 n取值只能是1-6 数字越小越粗

div标签 ---- 标准的块级标签

块级标签：独占一行，自动换行 div hn p hr

行内标签：不能自动换行，除非这一行的文本内容铺满了整个页面才会换行

2 表单标签

form 标签一般会和input标签连用

action: 跳转的路径

method: 表单提交的方式 get post

默认是get

name : 表单的名称

get:会把用户请求的内容暴露在地址栏上

post: 相较于get会安全一点

 <form action="..\第一天\demo01.html" method="get" name="register">
用户名: <input type="text" name="username"><br>
密码: <input type="password" name="password"><br>
 <input type="submit" >
 </form>

表单元素

表单元素（文本框、密码框、下拉列表、单选、多选）一般由input、textarea、select标签构成，需要放到form里面

1 input标签

type的取值： text ------ 文本框 password ---- 密码框 radio ---- 单选按钮 checkbox ----- 多选按钮 submit ---- 提交按钮 reset ----- 重置按钮 button ----- 普通的按钮 image ---- 图像按钮 file ---- 文件域 hidden ----- 隐藏域 email ------ 邮箱 color ----- 颜色域 date ----- 日期 time ------ 时间 datetime-local ------ 日期+时间 range ---- 进度条

<body>
 <form action="4.html" method="get" name="register">
        用户名<input type="text"name="usename" required>
        <p>
            用户名<input type="text"name="usename" value="hifumi" readonly disabled>
        </p>
        <p>
            &nbsp;&nbsp;&nbsp;密码<input type="password"name="password" autofocus required>
        </p>
        <p>
            代用浩是帅哥吗？<input  type="radio" name="gender">是<input type="radio" name="gender" checked>没错
        </p>
        <p>
            请选择你的爱好：
            <input type="checkbox" name="aihao">唱
            <input type="checkbox" name="aihao">跳
            <input type="checkbox" name="aihao">rap
            <input type="checkbox" name="aihao">篮球
            <input type="checkbox" name="aihao">music
        </p>
        <input type="submit" value="登录">
        <input type="reset">
        <input type="button" value="普通">
        <input type="image" src="屏幕截图 2023-11-24 013221.png" >
        <input type="file">
        <input type="hidden" value="123456">
        aaa:<input type="email" value="q">         
        <input type="color">
        <input type="time">
        <input type="date">
        <input type="datetime-local">
 </form>   
</body>

input标签常用的属性： checked ---- 默认选择 readonly ------ 只读字段只可以读不能修改 disabled ----- 禁用不可以点击 autofocus ------ 默认光标的位置 required---- 不能为空白提

<body bgcolor="#E3DEDE">
    <p align="center">
        <b>用户注册</b>
    </p>
    <p align="center">
        用户名: <input type="text" name="" id="" required ><br><br>
        密&nbsp;&nbsp;&nbsp;&nbsp;码:<input type="password" autofocus required>
    </p>
    <p align="center">
        请选择您的性别:<input type="radio" name="gender" checked>
        男<input type="radio" name="gender">女
    </p>
    <p align="center">
        请选择您的爱好：
        <input type="checkbox" name="aihao">足球
        <input type="checkbox" name="aihao">篮球
        <input type="checkbox" name="aihao">LOL
        <input type="checkbox" name="aihao">韩剧
        <input type="checkbox" name="aihao">王者荣耀
    </p>
    <p align="center">
       邮箱：<input type="email" placeholder="请输入您的邮箱">
    </p>
    <p align="center">
        用户头像 ：<input type="file" name="" id="">
    </p>
    <p align="center">
        您的家庭住址是：<select>
            <option value="">请选择您的地址</option>
            <option value="">潼南</option>
            <option value="">河川</option>
            <option value="">江北</option>
        </select><br><br><br><br><br>
        您的收获地址是：<select>
            <option value="">请选择您的地址</option>
            <option value="">潼南</option>
            <option value="">河川</option>
            <option value="">江北</option>
        </select>
    </p>
    <p align="center">
        请留下您的建议或者意见：
        <textarea name="a" id="" cols="30" rows="10" placeholder="您的建议或者意见"></textarea>
    </p>
    <p align="center">
        请选择您喜欢的颜色：<input type="color" name="" id="">
        注册的时间：<input type="datetime-local" value="年/月/日--;--">
    </p>
    <p align="center">
        <input type="submit" value="注册">
        <input type="reset">
    </p>
</form>
</body>

select标签

下拉列表框 ------ 一般和option标签进行连用

selected属性 ---- 默认被选中的选项

multiple属性 ------- 以列表的形式显示

textarea标签

用来实现文本域

cols ------- 多少列，用于显示文本的宽度

rows ------- 多少行，用来显示文本的高度

3 常见的属性

a标签 ----- 超链接

<a href="https://www.baidu.com/">点我</a>

vlink ----- 访问过超链接文本的颜色

Alink ------ 激活超链接文本的颜色

link ------ 超链接文本的颜色

text ---- 文本的颜色

bgcolor ----- 背景颜色

background ------ 背景图片

颜色表示法： 1、英文单词 2、#rrggbb 3、rgba() a表示透明度

<a href="https://www.baidu.com/">点击我</a>
 <a href="https://www.baidu.com/" target="_blank">点击我</a>
 <a href="https://www.baidu.com/" target="_parent">点击我</a>
 <a href="https://www.baidu.com/" target="_top">点击我</a>

锚点：使用锚点，点击锚点跳转到指定的位置

#+id的名字进行链接跳转

 <h1>XXXX小说</h1>
 <a href="#"><h3>第一章</h3></a>
 <a href="#"><h3>第二章</h3></a>
<a href="#"><h3>第三章</h3></a>
 <a href="#"><h3>第四章</h3></a>
 <a href="#05"><h3>第五章</h3></a>
 <a href="#06"><h3>第六章</h3></a>
 <p>
 <a href="#">第一章</a><br>
 ..............
 </p>
 <p>
 <a href="#">第二章</a><br>
 ..............
 </p>
 <p>
 <a href="#">第三章</a><br>
 ..............
 </p>
 <p>
 <a href="#">第四章</a><br>
 ..............
 </p>
 <p>
 <a href="#" id="05">第五章</a><br>
 ..............
 </p>
 <p>
 <a href="#" id="06">第六章</a><br>
 ..............
 </p>
 <a href="">回到顶部</a>
 </body>

5 img标签

src 属性 ---- 指的是图片的路径）

alt属性 ------ 代替图片的文本内容（因为路径的问他或者因为浏览器的问题显示不出来这个张图片的时候，alt属性值就是去描述这张图片的一个内容）

width ------ 宽度

height ---- 高度

border ------ 边框，默认值0

align ----- 位置（图片和文字的位置）

top (上对齐) middle(居中对齐) bottom(下对齐默认值) left(左对齐) right(右对齐)

title ------ 图片的标题，用来显示描述图片的文字

<body>
    这是上对其<img src="..\图片1.png" alt="哆啦" width="2000px" height="100px" border="2" align="top"><br>
    这是下对其<img src="..\图片1.png" alt="哆啦" width="200px" height="100px" border="0" align="bottom"><br>
    这是中对其<img src="..\图片1.png" alt="哆啦" width="200px" height="100px" border="2" align="top"><br>
    这是上对其<img src="..\图片1.png" alt="哆啦" width="200px" height="100px" border="2" align="top"><br>
    这是上对其<img src="..\图片1.png" alt="哆啦" width="200px" height="100px" border="2" align="top"><br>

    
</body>

位图

usemap属性

map标签的name属性，一般会和area标签进行连用

属性：shape ------- 鼠标点击的形状

coords ----- 鼠标点击形状的大小

href ------ 表示跳转的路径

6 多媒体标签

audio 标签 ---- 音频

video 标签 ---- 视频

controls属性 ---- 表示播放器的组件

autoplay属性 ----- 自动播放（浏览器不支持这个属性值）

loop 属性 ---- 循环播放

 <audio src="bgm.mp3" controls autoplay loop></audio>
 <video src="花园宝宝1.mp4" controls ></video>

.7 表格布局

table标签

包含thead tbodt tr td tfood

border ----- 表格的边框

 <table>
        <thead>表头</thead>
        <tbody>   ----- 表格的主干
            <tr>   ----- 行
                <td>第一行第一列</td>  ---- 列
                <td>第一行第二列</td>
            </tr>
            <tr>
                <td>第二行第一列</td>
                <td>第二行第二列</td>
            </tr>
        </tbody>
        <tfoot>表尾</tfoot>
 </table>

 <table border="1">
 </table>

表格的宽度和高度

width ----- 宽度 height ---- 高度

表格的对齐方式 align ----- 对齐方式 left right center

4 表格的背景

bgcolor ----- 背景颜色

background ---- 背景图片

<table border="1" width="800px" height="400px" align="center" bgcolor="pink" 
background="图片1.png">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>

表格的间距和边距

cellpadding ------ 表格边距

cellspacing----- 表格的间距

表格的嵌套

表格里面可以嵌套表格

 <table>
        <tr>
            <td>&nbsp;</td>
            <td>
                <table border="1" width="100px" height="100px" bgcolor="red">
                    <tr>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                </table>
            </td>
        </tr>
  </table>

表格的合并

rowspan（合并行）

colspan（合并列）