HTML笔记

最新推荐文章于 2024-03-24 19:44:07 发布

又要开始创造垃圾啦

最新推荐文章于 2024-03-24 19:44:07 发布

阅读量921

点赞数 31

文章标签： html

本文链接：https://blog.csdn.net/m0_61469426/article/details/136852325

版权

HTML

fn+f5 运行

html:5（或者！加tab）骨标签

ctrl+/ 注释

ctrl+= 放大

ctrl+- 缩小

格式化选中的文本 ctrl+k ctrl+f

一、基本标签

标题标签 hx :

可以用属性align来设置标题文字的对齐方式

左对齐：left

右对齐：right

居中对齐：center

用于标题

     <h1>一级标题</h1>
     <h2>二级标题</h2>
     <h3>三级标题</h3>
     <h4>四级标题</h4>
     <h5>五级标题</h5>
     <h6>六级标题</h6>
     <!-- 最多到六级 -->

段落标签 p：

相当于一个回车，用来分段

<p></p>

换行符 br:

行与行之间不会留下空行。

<br>

     br*5
     <br><br><br><br><br>

水平线 hr:

显示水平线

width：宽度，长度

align：对齐，center 居中对齐

color：颜色

height：高度单位是px

<hr width="80%" align="center" color="red" height="4px">

超链接标签 a：

href=网址，跳转目标

target=目标窗口的弹出方式，

title：鼠标悬停时显示的文字

target="_self"：在当前窗口打开页面，是默认值

target="_blank"：在新的窗口打开页面

 <a  href="http://baidu.com" title="百度">百度</a><br>
 <a  href="test.html" target="_blank">test</a><br>

在同一文件夹下的文件跳转 ./加上要跳转的文件名

 <a href="./案例  体育新闻.html">跳转</a>

开发初期，不知道超链接的跳转地址，href属性写#，表示空链接，不会进行跳转

<a href="#">空链接</a>

图像标签 img：

插入图片

src=图片路径（URL）

alt：当图片加载不出来，显示其内容

宽度和高度二选一，另一个等比例缩放

width：图片宽度（px）

height：图片高度（px）

title：鼠标悬停显示的内容

border：设置图片默认边框的宽度

<img src="https://bkimg.cdn.bcebos.com/pic/a6efce1b9d16fdfa4e685e5cb58f8c5494ee7b78?x-bce-process=image/resize,m_lfit,w_536,limit_1/quality,Q_70" title="熊猫">
<img src="https://bkimg.cdn.bcebos.com/pic/a6fce1b9d16fdfa4e685e5cb58f8c5494ee7b78?x-bce-process=image/resize,m_lfit,w_536,limit_1/quality,Q_70" alt="熊猫">

音频标签 audio

<audio src="音频的URL"></audio>

当属性名与属性值一样时简写

controls=“controls” 简写为controls

controls：显示音频控制面板

loop：循环播放

autoplay：自动播放，一般都会禁用自动播放

    <audio src="王为 - 山茶花读不懂白玫瑰 (教室版).ogg" controls loop autoplay></audio>

视频标签 video

<video src="视频的URL"></video>

controls :显示视频控制面板

loop：循环播放

muted：静音播放

autoplay：自动播放若想要自动播放成功，就一定要在前面加上muted

<video src="视频.mp4" controls  loop  muted autoplay></video>

若不在同一文件夹中则 ./文件夹名/视频（或音频）名

二、标签属性

<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>
 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。

三、文本格式化标签

粗体：b和strong

斜体：i和em

删除线：s和del

下划线：u和ins

    <b>你好</b>
    <strong>你好</strong>
    <i>你好</i>
    <em>你好</em>

    <s>你好</s>
    <u>你好</u>

small

小型文本

sub

下标文本

sup

上标文本

四、列表，表格，表单

列表

一、无序列表 ul（使用最多的）：

ul嵌套li ，ul是无序列表，li是列表条目

其内容由li来写

ul标签里面只能包含li标签

li标签里面可以包含任何内容

    li{$}*3  $表序号
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
     li{li$}*4
<ul>
     <li>li1</li>
     <li>li2</li>
     <li>li3</li>
     <li>li4</li>
</ul>

二、有序列表 ol：

布局排列整齐的需要规定顺序的区域

ol嵌套li，ol是有序列表，li是列表条目

同上把ul换成ol

ol标签里面只能包含li标签

li标签里面可以包含任何内容

    li{$}*3  $表序号
<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ol>
     li{li$}*4
<ol>
     <li>li1</li>
     <li>li2</li>
     <li>li3</li>
     <li>li4</li>
</ol>

三、定义列表

用在网站底部，一个标题对应几个内容

dl嵌套dt和dd，dl是定义列表，dt是定义列表的标题，dd是定义列表的描述/详情。

dl里面只能包含dt和dd

dt和dd里面可以包含任何内容

    <dl>
        <dt>服务中心</dt>
        <dd>申请售后</dd>
        <dd>售后政策</dd>
        
    </dl>

表格

一、基础

table嵌套tr，tr嵌套td/th

在网页中，表格莫瑞诺没有边框线，用border属性可以为表格添加边框线。

table	表格
tr	行
th	表头单元格（字加粗且居中）
td	内容单元格

有几行就写几个tr

<table border="1">
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>总分</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>99</td>
            <td>100</td>
            <td>199</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>98</td>
            <td>100</td>
            <td>198</td>
        </tr>
        <tr>
            <td>总结</td>
            <td>全市第一</td>
            <td>全市第一</td>
            <td>全市第一</td>
        </tr>
    </table>

结构标签

标签名	含义	说明
thead	表格头部	表格头部内容
tbody	表格主体	主要内容区域
tfoot	表格底部	汇总信息区域

二、合并单元格（不能跨结构标签合并）

1、保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量）

跨行合并，保留最上单元格，添加属性rowspan=需要合并的单元格数量

跨列合并，保留最左单元格，添加属性colspan=需要合并的单元格数量

2、删除其他单元格

 <table border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
                <th>总分</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>99</td>
                <td  rowspan="2">100</td>
                <td>199</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>98</td>
                <!-- <td>100</td> -->
                <td>198</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总结</td>
                <td colspan="3">全市第一</td>
                <!-- <td>全市第一</td> -->
                <!-- <td>全市第一</td> -->
            </tr>
        </tfoot>
    </table>

表单：收集用户信息

使用场景：登录页面，注册页面，搜索区域

input标签 type属性值不同，则功能不同

type属性值	说明
text	文本框，用于输入单行文本（用户名）
password	密码框
radio	单选框
checkbox	多选框
file	上传文件

    <!-- 输入什么就显示什么 -->
    文本框：<input type="text" >
    <br><br>
    <!-- 输入什么都是以 点 的形式显示的 -->
    密码框：<input type="password">
    <br><br>
    单选框：<input type="radio">
    <br><br>
    多选框：<input type="checkbox">
    <br><br>
    上传文件：<input type="file">

input标签占位文本（placeholder 输入提示信息）

文本框和密码框都能使用

文本框：<input type="text" placeholder="请输入用户名">

一、单选框 radio

属性名	作用	说明
name	控件名称	控件分组，同组只能选中一个（单选功能）
checked	默认选中	属性名和属性值相同，简写为一个单词

    性别： 
    <input type="radio" name="gender">男
    <input type="radio" name="gender" checked>女
    真正实现单选功能的是name，名称随便写 gender（性别）
    checked 让单选框默认选女

二、多文件上传 file

默认时，文件上传表单控件只能上传一个文件，添加multiple属性可以实现文件多选功能

    上传多个文件：<input type="file" multiple>

三、多选框（复选框）checkbox

默认选中：checked

    多选框：<input type="checkbox" checked>唱
           <input type="checkbox" checked>跳
           <input type="checkbox" >rap

四、下拉菜单

select嵌套option，select是下拉菜单整体，option是下拉菜单的每一项，selected是用来做默认选中

下拉菜单：
    <br><br>
    城市：
    <select>
     <option>北京</option>
     <option>上海</option>
     <option>广州</option>
     <option>深圳</option>
     <option selected>武汉</option>
    </select>

五、文本域标签 textarea

作用：多行输入文本的表单控件

    <!-- 基本上用css设置尺寸 -->
    <textarea >请输入评论</textarea>

六、 label标签

增大表单控件的点击范围

写法一：label标签只包含内容，不包含表单控件

设置label标签的for属性值和表单控件的id属性值相同

写法二：直接用label标签包含文字和表单控件，不要属性

    label标签：
    写法一： <input type="radio" name="gender" id="man"> <label for="man">男</label>
    写法二：<label><input type="radio" name="gender">女</label>

支持label标签增大点击范围的表单控件：文本框，密码框，上传文件，单选框，多选框，下拉菜单，文本域等等。

七、按钮 —button

  <button type="">按钮</button>

type属性值	说明
submit	提交按钮，点击后可以提交数据到后台（默认功能）
reset	重置按钮，点击后将表单控件恢复默认值
button	普通按钮，默认没有功能，一般配合JavaScript使用

<!-- form 表单区域 要想按钮能用就要使用form将所有表单控件包含在里面 -->
    <!-- action=""发送数据的地址 -->
    <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：独占一行

用来布局，没有含义，用来分层，他是一个大盒子，一人独占一行

<div></div>

span：不换行

与div一样用来布局的，但一对div结束后会自动换行，span不会换行，可以一行有好几个

     <div>dia</div>
     <div>dia2</div>
     <span>di1</span>
     <span>di2</span>

名称	描述	结果
&nbsp；	空格
&lt；	小于号	<
&gt；	大于号	>

   乾坤未定，你我&nbsp;&nbsp;&nbsp;皆是黑马。
    &lt;p&gt;

HTML中如何使表单中的多个文本框对齐

<label for="">表单文本</label>
//文本框
<input type="text" name="" id="">
解决办法：通过设置label来达到使文本框对齐的效果
给label标签设置一定的宽度，但是由于label是行内元素，所以display设位行内块级元素，接着用text-align设置是左对齐还是右对齐

右对齐效果
 label {
        width: 100px;
        text-align: right;
        display: inline-block;
    }

左对齐效果：
label {
        width: 70px;
        text-align: left;
        display: inline-block;
    }