HTML快速入门

Mr_Rop
136 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

1、什么是HTML

HTML

Hyper Text Markup Language（超文本标记语言）

<!DOCTYPE html>
<html lang="en">
<head>
    <!--meta：描述性标签，它用来描述我们网站的一些信息-->
    <!--meta：一般用来做SEO（SEO：搜索引擎优化）-->
    <meta charset="UTF-8">
    <meta name="keywords" content="HTML学习">
    <meta name="description" content="来这个地方可以学习HTML">
    <title>我的第一个HTML</title>
</head>
<body>
Hello,
</body>
</html>

2、网页基本标签

  • 标题标签
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
  • 段落标签
<!--段落标签-->
<p>两只老虎    两只老虎</p>
<p>跑得快       跑得快</p>
<p>一只没有耳朵     一只没有尾巴</p>
<p>真奇怪      真奇怪</p>
<p>两只老虎     两只老虎</p>
<p>跑得快        跑得快</p>
<p>一只没有耳朵    一只没有尾巴</p>
<p>真奇怪      真奇怪</p>
  • 换行标签
<!--换行标签-->
两只老虎    两只老虎
<br>
跑得快       跑得快
<br>
一只没有耳朵     一只没有尾巴
<br>
真奇怪      真奇怪
<br>
两只老虎     两只老虎
<br>
跑得快        跑得快
<br>
一只没有耳朵    一只没有尾巴
<br>
真奇怪      真奇怪
  • 水平线标签
<!--水平线标签-->
<hr>
  • 字体样式标签
<!--粗体，斜体-->
<h1>字体样式标签</h1>
粗体： <strong>HTML</strong><br>
斜体： <em>HTML</em>
  • 注释和特殊符号
<!--特殊符号-->
空&nbsp;&nbsp;&nbsp;格: <br>
&gt;
<br>
&lt;
<br>
&copy;

3、图像标签

  • 常见的图像格式
    • JPG
    • GIF
    • PNG
    • BMP
<img src="path" alt="text" title="text" width="x" height="y" />
src:图像地址
alt：图像的代替文字
title：鼠标悬停提示文字
width：图像宽度
height：图像高度

<!--网络地址-->
<img src="https://s4.ax1x.com/2022/01/22/7hk5Gj.png" alt="网络图片" title="悬停显示：网络图片" >

4、链接标签

<a href="path" target="目标窗口位置">连接文本或图像</a>
href：链接路径
target：链接在哪个窗口打开（常用值：_self,_blank）
target值：
	_blank:在新标签打开
	_parent:
	_self:在自己的网页中打开
	_top:
  • 文本超链接
  • 图像超链接
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
<a name="top">顶部</a>
<a href="https://www.baidu.com" target="_blank">百度</a> <br>
<a href="https://gitee.com/roppor" target="_blank">Git</a> <br>

<a href="./demo01.html">
    <img src="https://s4.ax1x.com/2022/01/22/7hk5Gj.png" alt="Hello,World" title="Hello,World">
</a>

<p><img src="https://s4.ax1x.com/2022/01/22/7hk5Gj.png" alt="Hello,World" title="Hello,World"></p>
<p><img src="https://s4.ax1x.com/2022/01/22/7hk5Gj.png" alt="Hello,World" title="Hello,World"></p>
<p><img src="https://s4.ax1x.com/2022/01/22/7hk5Gj.png" alt="Hello,World" title="Hello,World"></p>
<p><img src="https://s4.ax1x.com/2022/01/22/7hk5Gj.png" alt="Hello,World" title="Hello,World"></p>
<p><img src="https://s4.ax1x.com/2022/01/22/7hk5Gj.png" alt="Hello,World" title="Hello,World"></p>
<p><img src="https://s4.ax1x.com/2022/01/22/7hk5Gj.png" alt="Hello,World" title="Hello,World"></p>
<p><img src="https://s4.ax1x.com/2022/01/22/7hk5Gj.png" alt="Hello,World" title="Hello,World"></p>
<p><img src="https://s4.ax1x.com/2022/01/22/7hk5Gj.png" alt="Hello,World" title="Hello,World"></p>
<p><img src="https://s4.ax1x.com/2022/01/22/7hk5Gj.png" alt="Hello,World" title="Hello,World"></p>
<p><img src="https://s4.ax1x.com/2022/01/22/7hk5Gj.png" alt="Hello,World" title="Hello,World"></p>
<p><img src="https://s4.ax1x.com/2022/01/22/7hk5Gj.png" alt="Hello,World" title="Hello,World"></p>

<!--锚链接
1.需要一个锚标记
2.跳转到标记
#
-->

<a href="#top">回到顶部</a>
<a name="down">down</a>
</body>
</html>

5、行内元素和块元素

  • 块元素
    • 无论内容多少，该元素独占一行
    • （p、h1-h6……）
  • 行内元素
    • 内容撑开宽度，左右都是行内元素的可以在排在一行
    • （a、strong、em……）

6、列表

无序列表，有序列表，自定义列表

<!--有序列表-->
<ol>
    <li>南昌</li>
    <li>广州</li>
    <li>北京</li>
    <li>广东</li>
    <li>深圳</li>
</ol>
<!--无序列表-->
<ul>
    <li>南昌</li>
    <li>广州</li>
    <li>北京</li>
    <li>广东</li>
    <li>深圳</li>
</ul>
<!--自定义列表-->
<!--
dl：标签
dt：列表名称
dd：列表内容
-->
<dl>
    <dt>学科</dt>
        <dd>Java</dd>
        <dd>HTML</dd>
        <dd>CSS</dd>
        <dd>JavaWeb</dd>
        <dd>SSM</dd>

    <dt>位置</dt>
        <dd>江西</dd>
        <dd>南昌</dd>
        <dd>广东</dd>
        <dd>深圳</dd>
        <dd>浙江</dd>
</dl>

7、表格标签

<table border="">
    <tr>
        <!--colspan：跨列-->
        <td colspan="3" align="center">学生成绩</td>
    </tr>
    <tr>
        <!--rowspan：跨行-->
        <td rowspan="2">Rop</td>
        <td>语文</td>
        <td>80</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>90</td>
    </tr>
    <tr>
        <td rowspan="2">Rao</td>
        <td>语文</td>
        <td>85</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>95</td>
    </tr>
</table>

8、媒体元素

  • 视频元素
    • video
  • 音频元素
    • audio
<video src="../resources/video/WeChat_20220407151343.mp4" controls autoplay></video>
<audio src="../resources/audio/2321868686.mp3" controls autoplay></audio>

9、页面结构分析

元素名描述
header标题头部区域的内容（用于页面或页面中的一块区域）
footer标记脚部区域的内容（用于整个页面或页面的一块区域）
sectionweb页面中的一块独立区域
article独立的文章内容
aside相关内容或应用（常用于侧边栏）
nav导航类辅助内容
<header>
    <h2>网页头部</h2>
</header>

<section>
    <h2>网页头部</h2>
</section>

<footer>
    <h2>网页脚部</h2>
</footer>

10、内联框架

<iframe src="" name="hello" frameborder="0" width="1000px" height="800px"></iframe>

<!--点击hello可以使超链接中的页面展示在iframe中-->
<a href="1.我的第一个HTML.html" target="hello">点击跳转</a>

<!--
src：页面地址
name：框架标识名
-->
<!--<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11"-->
<!--        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">-->
<!--</iframe>-->

11、表单post和get提交

<h1>注册</h1>
<!--
表单form：
    action：提交到哪
    method：post/get
        post：在url中看不见提交的信息，可以传输大文件
        get：在url中看得见提交的信息，不安全，但高效。不能传输大文件
-->
<form action="1.我的第一个HTML.html" method="post">

    <p>名字：<input type="text" name="userName"></p>
    <p>密码：<input type="password" name="pwd"></p>
    
    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>
属性说明
type指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image和button， 默认是text
name指定表单元素的名称
value元素的初始值。type为radio时必须指定一个值
size指定表单元素的初试宽度。当type为text或password时，表单元素的大小以字符 为单位。对于其他类型，宽度以像素为单位
maxlengthtype为text或password时，输入的最大字符数
checkedtype为radio或checkbox时，指定按钮是否被选中

12、单选框

<!--单选框-->
<p>性别：
    <!--name：用于将这两个单选框放在同一个组里，实现单选框效果-->
    <input type="radio" name="sex" value="boy">男
    <input type="radio" name="sex" value="girl">女
</p>

13、按钮和多选框

<!--多选框-->
<p>兴趣爱好：
    <input type="checkbox" name="checkbox" value="篮球">篮球
    <input type="checkbox" name="checkbox" value="足球">足球
    <input type="checkbox" name="checkbox" value="排球">排球
    <input type="checkbox" name="checkbox" value="网球">网球
</p>

<!--按钮-->
<p>
    <input type="button" value="点我">
    <input type="image" src="https://s4.ax1x.com/2022/01/22/7hk5Gj.png">
</p>

14、下拉框

<!--下拉框，列表框-->
<p>国家：
    <select name="列表名称">
        <option>---请选择---</option>
        <option value="南昌">南昌</option>
        <option value="广州">广州</option>
        <option value="深圳">深圳</option>
        <option value="广东">广东</option>
        <option value="浙江">浙江</option>
    </select>
</p>

15、文本域和文件域

<!--文本域-->
<textarea name="textarea" cols="20" rows="5"></textarea>

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

16、搜索框滑块和简单验证

<!--邮箱-->
<p>邮箱:
    <input type="email" name="email">
</p>

<!--URL-->
<p>URL：
    <input type="url" name="url">
</p>

<!--数字-->
<p>数字：
    <input type="number" name="number" max="100" min="10" step="10">
</p>

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

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

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

17、表单初级验证

  • 常用方式

    • placeholder 提示信息

    • required 非空判断

    • pattern 正则表达式

avatar
文章
阅读
粉丝