HTML5基础 html5基础标签_html教程_前端技术

1.初识HTML

什么是HTML

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

HTML标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如
HTML 标签通常是成对出现的，比如和
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

HTML5结构解析

<!--DOCTYPE:告诉浏览器我们要使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页头部-->
<head>
<!-- meta是描述性标签，它用来描述我们网站的一些信息  -->
<!-- meta一般用来做SEO  -->

    <meta charset="UTF-8">
<!--title网页标签，显示网站标题名   -->
    <title>Title</title>
</head>
<!--body标签表示网页主体-->
<body>

</body>
</html>

什么是SEO

HTML5标签学习

标题标签

标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。
<h1> 定义最大的标题。<h6> 定义最小的标题。

段落标签

<p>两只老虎 两只老虎</p>

水平线标签

<hr/>

换行标签

两只老虎 两只老虎 <br/>

字体样式标签(粗体、斜体)

粗体 :<strong>I love you</strong> I love you
斜体 :  <em>I love you </em> I love you

注释和特殊符号

空格: &nbsp;
>  	: &gt
<	: &lt
版权所有：&copy;
······

图像标签

图像标签会涉及到所选图片的地址问题，这里推荐的是使用相对路径，把自己所要添加到资源创建个目录放进去，如果想直接使用绝对路径，本地保存的图片路径会解析不出来，因此绝对路径需要使用网络上的图片链接添加。以下同理

<!--图像标签
   src : 图片地址   相对路径(推荐)  绝对路径
   alt = " " : 若图像未加载出，起到解释
   title ： 解释标题，鼠标放在上面会出现输入的title内容
   ../ : 上一级目录
-->
<img src="../Resource/image/1.jpg" alt="一果" title="一果" width="400" height="180"> <br/>
<img src="../Resource/image/2.jpg" alt="艾米利亚" title="艾米利亚" width="320" height="180"> <br/>

链接标签

<!--链接标签
a标签 :
    href : 表示要跳转到哪个页面、
    target: 表示窗口在哪里打开
    _blank: 在新页面打开
    _self: 在自己的网页打开
-->
<a href="http://www.baidu.com" target="_blank">点击我跳转到百度</a> <br/>
<a href="http://www.baidu.com" target="_self"
>图片链接<img src="../Resource/image/baidu.png" alt="百度" title="百度" width="320" height="180"> </a> <br/>

锚链接

锚链接除了可以在此页面使用，也可用于跳转到其他页面

<!-- 锚链接、
1. 需要一个锚标记
2. 跳转到标记
格式 : # + 标记
-->
<a id="top">top</a> <br/>
<a href="#top">返回顶部</a> <br/>

功能性链接

<!--功能性链接
发送邮件链接 : mailto
QQ链接:
-->
<a href="mailto:lonelyyang3@qq.com">我的qq邮箱</a> <br>
<a href="mailto:lonelyyang3@Outlook.com">我的Outlook邮箱</a> <br>

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2639809653&site=qq&menu=yes"
><img border="0" src="http://wpa.qq.com/pa?p=2:2639809653:53" alt="点击这里给我发消息" title="点击这里给我发消息"/></a> <br>
<hr>

2.列表标签

有序列表

<!--有序列表
应用范围：试卷，问答。。。
-->
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>前端</li>
    <li>C/C++</li>
    <li>运维</li>
</ol>

无序列表

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

自定义列表

<!--自定义列表
dl : 自定义标签
dt : 列表名称
dd : 列表内容
应用于 ： 公司网站底部
-->
<dl>
    <dt>学科</dt>

    <dd>Java</dd>
    <dd>Python</dd>
    <dd>Linux</dd>
    <dd>C</dd>

    <dt>位置</dt>
    <dd>南京</dd>
    <dd>合肥</dd>
    <dd>亳州</dd>

</dl>

表格标签

<!--表格标签table
行 : tr
列 : td
-->
<table  border="1px">
    <tr>
        <!-- 跨列 colspan-->
        <td colspan="3">1-1</td>
        <!-- <td>1-2</td>-->
        <!-- <td>1-3</td>-->
    </tr>

    <tr>
        <!--跨行 rowspan-->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>

    <tr>
        <td>3-1</td>
        <td>3-2</td>
<!--        <td>3-3</td>-->
    </tr>
</table>

下面是一个小案列

<table border="2px">
<!--    <tr align="center"> &lt;!&ndash; 居中 &ndash;&gt;-->
    <tr style="text-align: center"> <!-- 居中 -->
        <td colspan="3">学生成绩</td>
    </tr>

    <tr>
        <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>

媒体标签

<!--媒体标签
    音频和视频
    controls : 控制条
    autoplay : 自动播放
-->
<video src="../Resource/video/鸡你太美.mp4" controls >鸡你太美</video>

<br>
<audio src="../Resource/audio/大原ゆい子%20-%20サンタになりたい.mp3 " controls >大原ゆい子%20-%20サンタになりたい</audio>

页面结构

iframe内联框架

出可能会现了拒绝访问问题

<!--iframe内联框架
创建了一个窗口，网站在这个窗口打开
-->
<iframe src="https://www.baidu.com" frameborder="0" width="1000px" height="800px "></iframe>
<br>
<iframe src="" name="hello" frameborder="0" width="1000px" height="800px "> </iframe>
<a href="https://www.cnblogs.com/HFUUwzy/" target="hello">点击跳转到我的博客</a>
<!-- 也可以放入视频链接-->
<iframe src="https://www.lexue001.com/skin/default/image/nopic.gif"
        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

3.表单form

表单的一些基础关键词

<!--表单form
    action : 表单提交的位置，可以是网站，也可以是一个请求处理地址
    method : post,get提交方式
    get : 我们可以在url中看到我们提交的信息，不安全，高但效
表单的应用:
    隐藏域 : hidden
    只读  : readonly
    禁用  : disabled
表单的初级验证:
    placeholder : 提示信息
    required : 非空判断
    patte : 正则表达式 https://www.jb51.net/tools/regex.htm(常用正则表达式网址)
-->

input

由于每个表单标签单独写出来较为麻烦，我放在一个案例代码中来实现。内容包括了
文本输入框、密码框、单选框标签、多选框标签、按钮、下拉框、列表、
文本域、文件域、邮箱验证、URL、数字、滑块、搜索框、增强鼠标可用性
自定义邮箱
需要注意的是name属性是我们网站传播信息的属性，可供后端进行操作
只包括介绍标签的使用，不包括功能交互

<form action="我的测试网站.html" method="get" >
<!-- 文本输入框  : input type = "text"
   value="请输入用户名"  maxlength="10" size="30"
   value="你信不信改不了我" readonly
-->
<p>名字: <input type="text" name="userName" placeholder="请输入用户名" required></p>
<!-- 密码框 : input type="password" hidden-->
<p>密码: <input type="password" name="password" placeholder="请输入密码" required></p>

<!-- 单选框标签
type="radio" : 单选框关键词
value="boy"  : 单选框的值
name="sex"   : 表示组
checked  : 默认选中
disabled
-->
    <p> 性别 :
        <input type="radio" value="boy" name="sex" >男
        <input type="radio" value="girl" name="sex" >女
    </p>
<!--多选框
input type = "checkbox "
-->
    <p>爱好 :
        <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" checked> 篮球
    </p>
<!--按钮-->
    <p>按钮 :
        <input type="button" value="点击变长" name="but1">
        <input type="button" value="点击变短" name="but2"> <br>
<!--        <input type="image" src="../Resource/image/1.jpg" alt="图片按钮" width="400" height="200">-->
<!--下拉框，列表 -->
    </p>国家 :
    <select name="列表名称">
        <option value="China"> 中国 </option>
        <option value="USA"> 美国 </option>
        <option value="UK"> 英国 </option>
        <option value="Germany" selected> 德国 </option>
    </select>
    <p>
<!--文本域-->
    <p>反馈 :
    <textarea name="textarea"  cols="30" rows="10"></textarea>
    </p>
<!--文件域-->
    <p>打开文件 :
        <input type="file" name="files" >
        <input type="button" value="上传" name="upload">
    </p>
<!--邮箱验证-->
    <p>邮箱 :
        <input type="email" name="email" >
    </p>
<!-- URL -->
    <p>网址 :
        <input type="url" name="url" >
    </p>
<!-- 数字 -->
    <p>鸡哥数量 :
        <input type="number" name="num" max="100" min="0" step="1">
    </p>
<!-- 滑块 -->
    <p>音量 :
        <input type="range" name="voice" max="100" min="0" step="5">
    </p>
<!-- 搜索框 -->
    <p>搜索 :
        <input type="search" name="search">
    </p>
<!--增强鼠标可用性-->
    <p>
        <label for="mark"> 你点我试试</label>
        <input type="text" name="text" id="mark">
    </p>
<!--&lt;!&ndash;自定义邮箱验证&ndash;&gt;-->
<!--    <p>自定义邮箱-->
<!--        <input type="text" name="diymail" pattern="	\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">-->
<!--    </p>-->
<!--    -->
<!--    提交，重置 -->
    <input  type = "submit">
    <input type="reset">
    </p>
</form>