HTML，day1，day2笔记

康康不会心动

已于 2024-04-23 21:46:32 修改

阅读量264

点赞数 5

文章标签： html 笔记 css

于 2024-04-20 01:09:27 首次发布

本文链接：https://blog.csdn.net/m0_73554016/article/details/137982414

版权

HTML基本骨架：
html：整个网页
head：网页头部，存放浏览器看的代码，例如css
body：网页主体，存放给用户看的代码，例如：图片。文字
title：网页标题

标签分为兄弟跟父子关系：
（1）<head></head>
<body></body>为兄弟关系
（2）<html></html>
<body></body>为父子关系

----------<br>代表换行---单标签

----------<hr>下划线

----------ctrl+/为注释（注意不是除线是字母区的斜线）

-----------Tab：向后
-----------shift Tab:向前

标题标签：
        <h1>第一标题</h1>
        <h2>第二标题</h2>
        <h3>第三标题</h3>
        <h4>第四标题</h4>
        <h5>第五标题</h5>
        <h6>第六标题</h6>
（1）h1标签在一个网页中只能用一次，用来放新闻标题或者网页的logo
（2）h2-h6没有使用次数限制

段落标签：
<p></p>
1.独占一行
2.段落之间存在空隙

文本格式化标签：
常见的有加粗，倾斜，下划线，删除线（均为双标签）
加粗：<string>或者<b>
倾斜：<em>或者<i>
下划线：<ins>或者<u>
删除线：<de|>或者<s>
    <strong>strong 加粗</strong>
    <b>b 加粗</b>
    <br>
    <em>em 倾斜</em>
    <i>i 倾斜</i>
    <br>
    <ins>ins 下划线</ins>
    <u>u 下划线</u>
    <br>
    <del>del 删除线</del>
    <s>s 删除线</s>

图像标签：
在网页中插入图片
<img src="1.jpg" alt="替换文本" title="提示文本">（单标签）
src用于指定图片的位置和名称，是<img>的必须属性
（属性）：
（1）（重要）alt：替换文本（图片无法显示的时候显示的文本）
（2）（重要）title：提示文本（鼠标悬停在图片上面的时候显示的文字）
（3）width：图片的宽度（值为数字，没有单位）
（4）height：图片的高度（值为数字，没有单位）
alt是为了防止网速慢图片加载不出来的情况无法被察觉。
title是鼠标悬停在图片上所显示的提示信息
<img src="2.jpg" width="100" height="100">
浏览器缩放图片默认是等比例缩放。

路径：
（1）相对路径：从当前文件位置出发找文件
1. /表示进入某个文件架里面
2. .表示当前文件所在文件夹
3. ..表示当前文件的上一级文件夹
（2）绝对路径：从盘符出发查找目标文件
应用场景：友情链接（超链接）

超链接：
点击跳转到其他页面
标签：<a href=""></a>
    <a href="https://www.mihoyo.com/">米哈游</a>
    
    <a href="./day1.html">跳转到day1页面</a>
    ---------<a href="./day1.html" target="_blank">跳转到day1页面</a> target="_blank"：打开新窗口
herf写#为空不会跳转

音频标签：
<audio src=""></audio>
属性：
（1）src（音频URL，mp3,Ogg,Wav）
（2）controls（显示音频控制面板）
（3）loop（循环播放）
（4）autoplay（自动播放）
在html5中，如果属性名和属性值完全一样，可以简写为一个单词，例如：<controls>与<controls="controls">

视频标签：

属性：
（1）src（视频URL，mp4，WebM，Ogg）
（2）controls（显示视频控制面板）
（3）loop（循环播放）
（4）muted（静音播放）
（5）autoplay（自动播放）注意要在静音下才可以自动播放

网页制作思路：从上到下，先整体再局部，逐步分析制作
分析内容->写代码->保存->刷新浏览器，看效果

列表：布局内容排列整齐的区域
列表分为无序列表（无序号），有序列表（有序号），定义列表（）三种
（1）无序列表
标签ul嵌套li，ul是无序列表，li是列表条目，li标签独占一行，li里面可以放任何内容
    <ul>
        <li>第一</li>
        <li>第二</li>
        <li>第三</li>
        <li>第四</li>
    </ul>
（2）有序列表：
ol嵌套li，ol是有序列表，li是列表条目，li标签独占一行，li里面可以放任何内容
    <ol>
        <li>高数</li>
        <li>线代</li>
        <li>概率论</li>
    </ol>
（3）定义列表：
一般用在网页底部，类似帮助中心，一个标题对应多个内容
dl嵌套dt，dd，dt是定义列表的标题，dd是定义列表的描述/详细
dl里面只能包含dt和dd，dt和dd里面可以包含任何内容
    <dl>
        <dt>服务中心</dt>
        <dd>申请售后</dd>
        <dd>售后政策</dd>
    </dl>

表格：
table嵌套tr，tr嵌套td/th
table代表表格
tr代表行
th代表表头单元格
td代表内容单元格
注意：在网页中，表格默认没有边框线，使用border属性可以为表格添加边框线。

表格结构标签：用表格标签把内容划分区域，让表格结构更清晰，语义更清晰。
标签名：
（1）thead：表格头部。表格头部内容
（2）tbody：表格主体。主要内容区域
（3）tfoot：表格底部。汇总信息区域

合并单元格：将多个单元格合并成一个单元格，以合并同类信息
1.明确目标
2.保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量）
（1）跨行合并，保留最上单元格，添加属性rowspan
（2）跨列合并，保留最左单元格，添加属性colspan
3.删除其他单元格
注意：不能跨结构标签合并

表单：收集用户信息（主要有登录，注册，搜索）
<input type="" >
input标签type属性值不同，功能不同
text：文本
password：密码
radio：单选
checkbox：多选
file：上传文件

input标签占位文本，提示信息，使用placeholder添加提示文字
<input type="password" placeholder="请输入密码">

单选框radio：name属性对控件分组，checked为初始默认属性值（属性名与属性值相同，省略）
单选框 1：<input type="radio" name="1" checked>
<br>
单选框 2：<input type="radio" name="1">

上传文件：实现多文件上传，添加属性multiple
多文件：<input type="file" multiple>

多选框默认选中：checked
多选框：<input type="checkbox" checked>

下拉菜单：select嵌套option，select是下拉菜单整体，option是下拉菜单每一项，selected属相为默认选中
    <select name="" id="">
        <option value="">北京</option>
        <option value="">上海</option>
        <option value="">广州</option>
        <option value="">深圳</option>
        <option value="" selected>武汉</option>
    </select>

文本域：多行输入文本的表单控件。

<textarea name="" id="" cols="" rows="" placeholder="请输入文本"></textarea>

label：网页中某个标签的说明文本，用label标签绑定文字和表单控件的关系，增大表单控件的点击范围。
写法一：
（1）label标签只包裹内容，不包裹表单控件
（2）设置label标签的for属性值和表单控件的id属性值相同
<input type="radio" name="" id="man">
    <label for="man">男</label>
姓别：
    <input type="radio" name="gee" id="1" checked> <label for="1">男</label>
    <input type="radio" name="gee" id="2"> <label for="2">女</label>
写法二：使用label标签包裹文字和表单控件，不需要属性
    <input type="radio" name="gee" id="1" checked> <label for="1">男</label>
    <label>
        <input type="radio" name="gee">女
    </label>

按钮：button
submit：提交按钮，点击可提交后台
reset：重置按钮，点击恢复默认值
button：普通按钮（配合JavaScript使用）
    
    
    <form action="">
        用户名：<input type="text">
        <br><br>
        密码：<input type="password">
        <br><br>
        <button type="submit">提交</button>
        <button type="reset">重置</button>
        <button type="button">普通</button>
    </form>

无语义的布局标签：布局网页
div：独占一行
span：不换行

字符实体：在网页中显示预留字符
在代码中敲键盘的空格，网页只识别一个
空格：&nbsp；
小于号：&lt；
大于号：&gt；