HTML学习总结

最新推荐文章于 2024-09-10 20:25:25 发布

风棱

最新推荐文章于 2024-09-10 20:25:25 发布

阅读量166

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/qq_41123079/article/details/108693384

版权

HTML总结

1.初步了解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="JAVA">
    <meta name="description" content="Java learing">
<title>我的网页</title>
</head>
<body>
Hello,World!
</body>
</html>

DOCTYPE:告诉浏览器使用什么规范
head标签代表网页头部
meta用来描述网站信息
body标签代表网页主体
title网页标题

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

2.基本标签

标题标签

<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>

段落标签

<!--段落标签-->
<p>两只老虎两只老虎</p>
<P>跑得快跑得快</P>
<P>一只没有耳朵</P>

单独成行

换行标签
```
<br/>
```
水平线标签
```
<hr/>
```

粗体斜体

<strong>粗体</strong>
<em>斜体</em>

特殊符号

空&nbsp;&nbsp;&nbsp;格<br/>
大于号&gt;<br/>
小于号&lt;<br/>
版权号&copy;<br/>

3.图像标签

<!--img学习
src:图片地址
相对地址，绝对地址
../  上一级目录
alt:加载失败替代
title：鼠标悬停文字
width:宽
height：高
-->
<img src="../resource/image/1.png" alt="360图标" title="嘻嘻嘻嘻" width="300" height="300">

4.链接标签

<!--a标签学习
href:必填，目标页面
target:表示窗口在哪里打开
_blank  在新标签中打开
_self   在旧标签中打开
-->

示例

<a href="demo1.html" target="_self">点击我跳转到页面一</a>
<a href="https://www.baidu.com">跳转到百度</a>

图片跳转链接

<a href="demo1.html">
    <img src="../resource/image/1.png" alt="360图标" title="嘻嘻嘻嘻" width="300" height="300">
</a>

锚链接

<a name="top">顶部</a><br/>
…………………………………………
…………………………………………
…………………………………………
<!--锚链接
1.需要一个锚标记
2.跳转到标记
-->
<a href="#top">回到顶部</a>

邮件链接

<!--邮件链接
邮件链接：mailto
qq邮箱：qq推广
-->
<a href="mailto:417610688@qq.com">点击联系我</a>

5.列表

有序列表

<!--有序列表-->
<ol>
    <li>python</li>
    <li>Python</li>
    <li>运维</li>
    <li>C++</li>
    <li>前端</li>
</ol>

无序列表

<!--无序列表
应用范围：导航，侧边栏
-->
<ul>
    <li>python</li>
    <li>Python</li>
    <li>运维</li>
    <li>C++</li>
    <li>前端</li>
</ul>

自定义列表

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

6.表格

行列属性

<!--表格table
行:tr
列:td
-->
<!--colspan 跨列-->
<!--row span 跨行-->

示例

<body>
<table border="3px">  <!--border：列表样式-->
    <tr>
        <!--colspan 跨列-->
        <td colspan="3">学生成绩</td>
    </tr>
    <tr>
        <!--row span 跨行-->
        <td rowspan="2">悟空</td>
        <td>语文</td>
        <td>100</td>  
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
    <tr>
        <td rowspan="2">八戒</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
</table></body>

结果

在这里插入图片描述

7.媒体元素

音频视频

<!--音频和视频
src:资源路径
controls:控制条
autoplay:自动播放
-->
<audio src="../resource/Audio/1.MP3" controls autoplay></audio>
<viedo></viedo>   <!--viedo同上-->

8.内联框架

<!--iframe内联框架
src:地址
w-h:宽度高度
target:目标
-->
<iframe src="" name="hello" frameborder="0" width="100px" height="100px"></iframe>

<a href="demo1.html" target="hello">点击跳转</a>

target指向name

9.重点：表单

表单开头结尾

<!--表单form
action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method:post,get 提交方式
-->
<form action="demo1.html" method="get">
</form>

文本输入框

<!--文本输入框：input type="text"
    value 默认初始值
    maxlength 最长能写几个字符
    size 文本框的长度-->
    <p>名字： <input type="text" name="username" value="666" maxlength="8" size="30" placeholder="请输入用户名" required></p>
    <!--密码框：input type="password"-->
    <p>密码： <input type="password" name="pwd"></p>

在这里插入图片描述

单选/多选框

<!--单选框标签
value 单选框的值
name 组名
checked 默认值
-->
    <p>性别：
        <input type="radio" value="boy" name="sex" checked/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>

<!-- 多选框
input type="checkbox"
-->
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="sleep" name="hobby" checked>代码
        <input type="checkbox" value="sleep" name="hobby">聊天
        <input type="checkbox" value="sleep" name="hobby">游戏
    </p>

在这里插入图片描述

文本域

<!--文本域
 input type="file"
 -->
    <p>反馈：
        <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
    </p>

文件域

<!-- 文件域-->
    <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload"> 
    </p>

在这里插入图片描述

邮箱验证

    <!--邮件验证-->
    <p>
        <label for="email" >邮箱：</label>
        <input type="email" name="email" id="email" >
    </p>

URL/数字

<!--URL-->
    <p>
        <input type="url" name="url">
    </p>
<!--数字-->
    <p>
        <input type="number" name="num" max="100" min="0" step="10">
    </p>

滑块

<!--滑块
-->
    <p>音量：
        <input type="range" name="voice" min="10" max="100" step="10">
    </p>

搜索框

<!--搜索框-->
    <p>搜索：
        <input type="search" name="search">
    </p>

增强鼠标可用性

<!--增强鼠标可用性-->
    <label for="mark">点击输入</label>
    <input type="text" id="mark">

自定义邮箱(pattern正则表达式)

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

表单提交与重置

<p>
    <input type="submit">
    <input type="reset">
</p>

风棱

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML学习总结

HTML总结1.初步了解<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="keywords" content="JAVA"> <meta name="description" content="Java learing"><title>我的网页</title></head&
复制链接

扫一扫