HTML总结

1.注释方法

ctrl + /

2.HTML的基本组成

head：网页头部
meta：描述标签，用来描述信息
title：网页标题
body：网页主体（代码通常写在这个位置）

3.基本标签

标题标签

<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>

水平线标签

<hr/>

段落标签

<p>内容<p/>

换行标签

行末<br/>

粗体和斜体

粗体：<strong>文字</strong>
斜体：<em>文字</em>

特殊符号

空格：&nbsp
大于号：&gt
小于号：&lt
版权符号：&copy

4.图像标签

<img src="图像地址" alt="图像名字" title="悬停文字" width="宽度" height="高度">

5.链接标签

a标签

herf

要跳转的页面的链接

target

表示在哪里打开页面

-blank：在新的页面打开链接
-self：在当前页面打开链接

锚链接

前提：需要一个标记；作用：点击链接可返回此标记
<a name="top">顶部</a>
<a href="#top">回到顶部</a>

功能性链接

邮箱链接：mailto

<a href="mailto:2452466220@qq.com">点击联系我</a>

qq链接

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img border="0" src=https://pub.idqqimg.com/wpa/images/counseling_style_53.png alt="你好，加我领取小电影" title="你好，加我领取小电影"/></a>
（该链接取自qq推广）

6.列表

有序列表

<ol>
    <li>c/c++</li>
    <li>java</li>
    <li>python</li>
    <li>mysql</li>
    <li>linux</li>
</ol>

无序列表

<ul>
    <li>c/c++</li>
    <li>java</li>
    <li>python</li>
    <li>mysql</li>
    <li>linux</li>
</ul>

自定义列表

dl：标签
dt：列表标题
dd：列表内容

<dl>
    <dt>学科</dt>
    <dd>java</dd>
    <dd>python</dd>
    <dd>linux</dd>

    <dt>河南</dt>
    <dd>郑州</dd>
    <dd>南阳</dd>
</dl>

表格table

行：tr
列：td
边框：border
跨行：colspan
跨列：rowspan

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

7.# 媒体元素

音频audio

src：音频地址

视频video

src：视频地址
controls控制条
auroplay自动播放

<video src="../resources/video/share_fbcc13637f4f2f193ed7af73547f6d24.mp4" controls autoplay height="200" width="400"></video>
<hr>
<audio src="../resources/audio/2060708179.mp3" controls autoplay></audio>
</body>

8.页面结构

<header>
    <h2>网页头部</h2></header>
<section>
    <h2>网页主体</h2></section>
<footer>
    <h2>网页脚部</h2></footer>

9.内联框架

iframe

<iframe src="https://www.baidu.com" name="hello" frameborder="0" width="=1000" height="800"></iframe>
<a href="https://www.cnblogs.com/rfcaTheshy/" target="hello">点击跳转</a>
</body>

10.表单（重点）

form

action：表单提交的位置可以使网站，也可以是一个请求处理地址

method：post，get提交位置

get 提交的信息可以在url中看到，不安全但高效，不能传输大文件
post 安全，传输大文件

文本输入框text

value：初始值
maxlength：输入的最大长度
size文本框长度

名字： <input type="text" name="username" value="雀食蟀" maxlength="8" size="8" required>

单选框radio

value：单选框的值
name：单选框所属组（必填）

性别：<input type="radio" value="boy" name="sex">男
            <input type="radio" value="girl" name="sex">女

多选框checkbox

爱好：<input type="checkbox" value="sing" name="hobby">唱
            <input type="checkbox" value="dance" name="hobby">跳
            <input type="checkbox" value="rap" name="hobby">rap
            <input type="checkbox" value="basketball" name="hobby">打篮球

按钮

button 普通按钮
image 图像按钮
submit 提交按钮
reset 重置按钮

下拉框select

英雄：<select name="legends">
        <option value="Riven">锐雯</option>
        <option value="Arilia">刀妹</option>
        <option value="Feriona">剑姬</option>
        <option value="Camile" selected>青钢影</option>
    </select>

文本域textarea

cols：行长度
rows：列长度
<textarea name="textarea" cols="30" rows="10">英雄介绍</textarea>

文件域（上传文件）

<input type="file" name="files">

表单初级验证

邮箱验证

邮箱：<input type="email" name="email">

URL

URL：<input type="url" name="url" >

数字验证

充值金额：<input type="number" name="num" max="100" min="0" step="10">（step为最小可调整的范围）

自定义邮箱

自定义邮箱：<input type="text" name="diyemail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">

提示信息：placeholder
非空判断：required
正则表达式：pattern
**

滑块

音量：<input type="range" name="voice" max="100" min="0" step="1">

搜索框

搜索：<input type="search" name="search">

label标签

作用：增强鼠标的可用性（即点击指定文字可进入指定输入框）

        <label for="mark">你点我试试</label>
        <input type="text" id="mark">

11.补充

readonly 只读标签
disabled 禁止标签
hidden 隐藏域

posted @ 2021-10-08 19:18 Theshy-Riven 阅读(60) 评论(0) 收藏举报

刷新页面返回顶部

Theshy-Riven