前端学习小白打卡2

最新推荐文章于 2024-08-14 12:45:22 发布

白潏

最新推荐文章于 2024-08-14 12:45:22 发布

阅读量78

点赞数 1

分类专栏：前端文章标签：前端学习 html5 vscode

本文链接：https://blog.csdn.net/qq_65719034/article/details/131605752

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

列表标签：

无序列表：
标签名
ul 表示无序列表的整体，用于包裹li标签
li 表示无序列的每一项，包含内容
特点：
列表的每一项都默认显示圆点标识

ul只能包含li标签
li可以包含任意

有序列表
ol用于表示有序列的整体，用于包裹li标签
li同上
特点：
默认显示序号标签

自定义列表
场景：用于网站底部导航
dl表示整体，包裹 dt dd标签
dt 表示自定义列表的主题
dd 表示自定义列表的针对主题的每一项内容
特点：
dd 前默认显示缩进
dl只能包含dt dd
dt dd 可以包含任何内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./1.css">
</head>
<body>
    <p>测我司</p>
    <ul>
        <li style="color: blue;">无序1</li>
        <li>无序2</li>
    </ul>
    <br>
    <hr>
    <ol>
        <li>张</li>
        <li>网</li>
        <li>李</li>
    </ol>
    <br>
    <hr>
    <dl>
        <dt>帮助</dt>
        <dd>11 </dd>
        <dd>22</dd>
    </dl>
    <hr>
    <table border="5" width="200" height="200" >
        <caption><b>第一个表格</b></caption> 
        <thead>
            <tr>
                <th>第一个</th>
                <th>第二个</th>
                <th>didansg</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">ii</td>
                <td colspan="2">iio</td>
                <!-- <td>opop</td> -->
            </tr>
            <tr>
                <!-- <td>ii</td> -->
                <td>iio</td>
                <td>opop</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>ii</td>
                <td>iio</td>
                <td>opop</td>
            </tr>
        </tfoot>
       
    </table>
</body>
</html>

表格标签
table 表格整体,可以包裹多个tr
tr 表格每行,可用于包裹td
td 表格单元格，用于书写内容
属性：（格子）
border 属性值：数字效果：边框高度
width 数字表格宽度
height 数字表格高度
样式效果推荐css

表格标题和表头单元格标签
显示整体大标题和一些列小标题
caption 表格大标题默认在表格整体顶部居中位置（写在table标签）
th 表格单元格表格第一行，默认内部文字加粗并居中（写在tr标签，用于替换td）

表格的结构标签
让表格的内容结构分组，突出不同的部分
thead 表格头部
tbody 表格主体
tfoot 表格底部

表格结构标签内部用于包裹tr标签
结构标签可以省略（只是提升了浏览器的执行效率）

合并单元格的思路
将多个单元格合并成一个，跨行合并，跨列合并
明确合并那些
左上原则，确定保留谁，删除谁
上下合并只保留最上的，删除其他
左右合并，只保留最左的，删除其他
放在td属性值内
跨行合并 rowspan 个数（将多行单元格垂直合并）
跨列合并 colspan 个数（将多列的单元格水平合并）
注意：只有同一个结构标签中的单元格才能合并，不能跨结构合并（thead tbody tfoot）

表单标签
场景：在网页中显示收集用户信息的表单效果，登录，注册
标签名：input（单标签）可以通过type的属性值不同，展示不同的效果
type属性值：
text 文本框，用于输入单行文本添加提示 placeholder 占位符，提示用户输入内容的文本
属性：
password 密码框，用于输入密码书写内容加密
radio 单选框，用于多选一，需要添加name属性，有相同name属性的单选框为一组，一组选一个，checked 默认选中
checkbox 多选框用于多选多
file 文件选择，上传文件 multiple 多文件选择

submit 提交按钮，用于提交数据给后端服务器
reset 重置按钮，用于重置，点击后恢复表单默认值
button 普通按钮，无功能，用于js添加功能
如果需要实现以上按钮功能，需要配合form标签试用，form标签把表单标签一起包裹起来

name 定义input的元素值
value 规定input元素的值

button标签
标签名button
属性：
submit 提交同上
reset 同上
button 同普通按钮

谷歌浏览器中button默认提交按钮
button 十双标签用于包裹其他内容文字图片

select下拉菜单标签

select 下拉菜单整体
option 下拉菜单的每一项

属性
selected 下拉菜单默认选中一般第一个是默认选择

textare文本域标签
场景：应用于输入多行文本
标签名：textare
属性：
cols 规定文本域内可见宽度
rows 规定文本域内可见行数
右下角可以拖拽改变大小（只能css禁用）

label 标签
标签名：label

使用方法
1
用label把内容包裹
在表单标签上添加id属性
在label标签的for属性中设置对应的id属性值

2
用label包裹内容和表单标签包裹
把label的for属性删除

语义化标签
没有语义的布局标签 div span
场景：实际开发网页时会大量频繁的使用div和span
div标签一行显示一个（独占一行）
span标签一行显示多个

有语义标签
（移动端）
header 网页头部
nav 网页导航
footer 网页底部
aside 网页侧边栏
section 网页区块
article 网页文章

特点和div一样

字符实体
能通过字符实体在网页中显示特殊符号

html中的空格合并（网页不认识多个空格）
常见字符实体

空格 &nbsp；
小于 &lt；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
    文本框:<input type="text" name="name" placeholder="请输入姓名">
    密码：<input type="password" name="" id=""placeholder="请输入密码">
    <br>
    单选框：
    <input type="radio" name="sex" id="1" checked><label for="1">男</label>   
    <label><input type="radio" name="sex" id="">女  </label>
 
    <br>
    多选：<input type="checkbox" name="" id=""> 1
    <input type="checkbox" name="" id="">2
    <input type="checkbox" name="" id="">3
    <input type="checkbox" name="" id="">4
    <br>
    文件:<input type="file" multiple>
    <br>
    提交：<input type="submit" >
    <br>
    重置：<input type="reset">
    <br>
    <input type="button" value="空号">
</form>
<button>提交+·1</button>
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type=" button">kong1</button>

下拉款号：<select name="" id="">
<option value="">121</option>
<option value="">1221</option>
<option value=""selected> 1231</option>
</select>
请输入：<textarea name="" id="" cols="30" rows="10">

</textarea>
<div>1</div>
<div>1</div>
<div>1</div>
<span>  </span>
<span>  </span>
<span>  </span>


敌对的&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;d1dada
</body>
</html>

css
css：层叠样式表
给页面中的html标签设置样式
css写在style标签中，style标签一般写在head标签里面，title标签下面
需要改什么就选择该标签名
如
p
{
color:red;
}

注释为/* */

选择器：查找标签

px：像素
font-size 字体大小控制
background-color 背景色
width height

css的3种写法
1内嵌式（当前页面，小案例）
css写在style标签中
style可以写在页面任意位置，但是通常约定写在head标签中

<style>
         /* zhushi  */
         p{
            color: blueviolet;
            font-size: 20px;
            background-color: bisque;
            width: 200px;
            height: 200px;
         }
    </style>

2外嵌式（多个页面）
css写在一个单独的.css文件中
需要通过link标签在网页引入
写在head标签下
关系样式为样式表

 <link rel="stylesheet" href="./1.css">

3行内式（当前标签，配合js使用）
css写在标签的style属性中

<li style="color: blue;">无序1</li>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         /* zhushi  */
         p{
            color: blueviolet;
            font-size: 20px;
            background-color: bisque;
            width: 200px;
            height: 200px;
         }
    </style>
</head>
<body>
    <p>这是一个p标签</p>
</body>
</html>

.css