HtmlFoundation

置顶挖挖挖-9527

已于 2023-04-08 13:37:47 修改

阅读量180

点赞数

文章标签： html

于 2023-03-03 17:13:14 首次发布

本文链接：https://blog.csdn.net/m0_59883382/article/details/129320956

版权

Web前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一. h1-h6 标题

<!-- 独占一行, 自带上下间距, 字体加粗 -->
<h1 align="center">文档标题1</h1>
<h2 align="right">文档标题2</h2>
<h3>文档标题3</h3>
<h4>文档标题4</h4>
<h5>文档标题5</h5>

二. br 换行

换行

<!-- 换行 -->
<h1 align="center">文档标题1</h1>
<br>
<h2 align="right">文档标题2</h2>

三. p 段落

独占一行, 自带上下间距

<p>段落标签1</p>
<p>段落标签2</p>
<p>段落标签3</p>

四. hr 水平分隔符

<p>段落标签1</p>
<hr>
<p>段落标签3</p>

五. b 加粗

```
<b>加粗</b>
```

六. i 斜体

```
<i>斜体</i>
```

七. u 下划线

```
<u>下划线</u>
```

八. s 删除线

```
<s>删除线</s>
```

九. ul 无序列表

ui 无序列表 li 列元素

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

列表嵌套

<ul>
    <li>凉菜
        <ul>
            <li>白菜</li>
            <li>黄瓜</li>
        </ul>
    </li>
    <li>热菜
       <ol>
           <li>黄瓜</li>
           <li>白菜</li>
       </ol>
    </li>
</ul>

十. ol 有序列表

ui 无序列表 li 列元素

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

10.1 练习

<h1 align="center">个人简历</h1>
<hr>
<h2>基本信息</h2>
姓名: <b>苍老师</b>
性别: 男
爱好: 摄影
<h2>个人经历</h2>
<ul>
    <li>小学9年</li>
    <li>中学6年</li>
    <li>高中12年</li>
</ul>
<h2>获得荣誉</h2>
<ol>
    <li>知名度最高奖</li>
    <li>体重达人</li>
</ol>

十一. img 图片

src: 资源路径
alt: 当图片不能正常显示时显示的文本
title:图片标题当鼠标悬停时显示的文本
width/height:设置宽高, 只设置宽度高度会自动等比例缩放, 两种赋值方式:1.像素 2.百分比

11.1 相对路径

    <img src="1.webp" alt="图片1" title="我是标题" width="80%" height="80%">

11.2 绝对路径

<img src="https://lmg.jj20.com/u1200.jpg" alt="图片1" title="我是标题" width="800" height="500">

十二. a 超链接

12.1 页内跳转

href填入要跳转的id

<p id="top1"></p>
<br>
<br>
.
.
.
<br>
<br>
<a href="#top1">跳转到1</a>

12.2 页外跳转

点击文字跳转

<a href="https://www.baidu.com">超链接1</a>
<a href="02简历练习.html">超链接2</a>
<a href="1.webp">超链接3</a>

点击图片跳转

<a href="https://www.baidu.com">
    <img src="1.webp" alt="未找到">
</a>

十三. table 表格

相关标签: table表格 tr表示行 td表示列 th表头 caption表格标题
相关属性:border 边框 colspan跨列 rowspan跨行

13.1 table 表格

表格例子

  <table border="1">
    <caption>购物车</caption>
    <tr>
        <th>编号</th>
        <th>名称</th>
        <th>价格</th>
    </tr>
    <tr>
        <td>01</td>
        <td>康师傅</td>
        <td>3元</td>
    </tr>
    <tr>
        <td>02</td>
        <td>怡宝</td>
        <td>2元</td>
    </tr>
</table>

合并单元格

 <table border="1">
    <tr>
        <td colspan="2">1-1</td>
        <td rowspan="2">1-2</td>
        <td rowspan="3">1-3</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-3</td>
    </tr>
    <tr>
        <td colspan="3">3-1</td>
    </tr>
</table>

十四. form 表单

type 控件类型
name 提交的数据标识符
maxlength 设置最大长度
value 设置默认值
readonly 设置为只读
placeholder 占位文本
checked 默认被选中
disabled 按钮禁用

14.0 form

表单在网页中主要负责数据采集功能。HTML中的<form>标签，就是用于采集用户输入的信息，并通过<form>标签的提交操作，把采集到的信息提交到服务器端进行处理

属性	值	描述
action	URL地址	规定当提交表单时，向何处发送表单数据
method	get或post	规定以何种方式把表单数据提交到 action URL
enctype	application/x-www-form-urlencoded multipart/form-data text/plain	规定在发送表单数据之前如何对其进行编码
target	_blank _self _parent _top framename	规定在何处打开

action uil地址
method 规定以什么方式提交表单 get/post
enctype 发送数据之前如何进行编码
target 规定在何处打开url

14.1 text 文本框

用户名: <input type="text" name="wd" maxlength="5" value="tom"
        readonly placeholder="请输入用户名"> <br>

14.2 password 密码框

密码: <input type="password" name="password"  placeholder="请输入密码">

14.3 submit 提交

用于提交所有数据
```
 <input type="submit" value="注册">
```

14.4 radio 单选

单选

性别: 
<input type="radio" name="gender" value="m"> 男
<input type="radio" name="gender" value="w" checked>  女

14.5 checkbox 多选

多选

        <input type="checkbox" name="hobby" checked value="cy"> 抽烟
        <input type="checkbox" name="hobby" checked value="hj"> 喝酒
        <input type="checkbox" name="hobby" checked value="tt"> 烫头
        <br>

14.6 date 日期

日期

            生日: <input type="date" name="birthday" ><br>

14.7 file 提取文件

file

            照片: <input type="file" name="pic"><br>

14.8 select 下拉框

value 设置提交的内容,如果不写则提交标签体的内容

selected 设置默认选中

        <select name="city" id="">
            <option value="bj">北京</option>
            <option value="sh" selected>上海</option>
            <option value="gz">广州</option>
        </select> <br>

14.9 reset 重置按钮

reset

<input type="reset" value="重置按钮">

button 也可实现同样效果

<button type="reset">重置按钮</button>

14.10 button 按钮

<button type="button">自定义按钮</button>

14.11 新增表单

属性值	说明
type=“email”	限制用户输入的必须为邮箱
type=“url”	限制用户输入的必须为URL
type=“date”	限制用户输入的必须为日期
type=“time”	限制用户输入的必须为时间
type=“month”	限制用户输入的必须为月份
type=“week”	限制用户输入的必须为周
type=“number”	限制用户输入的必须为数字
type=“tel”	限制用户输入的必须为手机号码
type=“search”	搜索框
type=“color”	生成一个颜色选择表单

14.12 新增属性

属性	值	说明
required	required	表示内容不能为空，必填项
placeholder	提示文本	提示信息
autofocus	autofocus	自动聚焦，页面加载完成自动聚焦光标
autocomplete	off/on	当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。默认已经打开，如autocomplete=“on”，关闭autocomplete =”"off"需要放在表单内，同时加上name属性，同时成功提交
multiple	multiple	可以多选文件提交

十五. 分区标签

15.1 作用

可以理解为一个容器,对多个有相关性的标签进行统一管理

15.2 常见的分区标签

div 独占一行
span 共占一行
↓ HTML5标准中新增的专门用于做页面布局的分区标签作用和div一样都是独占一行的
header 头
main 主体
footer 脚
section 区域
nav 导航

十六. 音视频

16.1 video 视频

css

<video src="url" controls="controls"></video>

常见属性

属性	值	说明
autoplay	autoplay	视频自动播放（chorme需要添加muted属性才可以自动播放）
controls	controls	向用户展示视频控件
width	像素	设置播放器宽度
height	像素	设置播放器高度
loop	loop	是否循环播放视频
preload	auto(预先加载视频)；none(不预加载视频)	规定是否预加载视频（若设置了autoplay属性则会忽略）
src	视频路径	视频url
poster	图片路径	加载等待时显示的图片
muted	muted	静音播放

16.1.1 video 举例

html

<video poster="https://ys.mihoyo.com/main/_nuxt/img/47f71d4.jpg"
       loop="loop"
       muted="muted"
       autoplay="autoplay"
       controls
       style="width: 1665.78px; height: 937px;">
    <source src="https://ys.mihoyo.com/main/_nuxt/videos/3e78e80.mp4" type="audio/mp4">
    不支持
</video>

16.2 audio 音频

css

<audio src="url" controls="controls"></audio>

常见属性
属性值说明
autoplay autoplay 音频就绪后自动播放
controls controls 向用户展示音频控件
loop loop 音频循环播放
src url 要播放音频的url

属性	值	说明
autoplay	autoplay	音频就绪后自动播放
controls	controls	向用户展示音频控件
loop	loop	音频循环播放
src	url	要播放音频的url

挖挖挖-9527

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HtmlFoundation

1
复制链接

扫一扫

专栏目录