HTML5 基础

本博文不包括CSS和JavaScript

HTML基本结构

HTML众所周知是超文本标记语言，之所以叫超文本标记语言肯定是有超过一般文本的地方，包括很多多媒体元素等。
一般最简单的HTML包括头部，标题，页面的主体这几部分

<!--DOCTYPE:文档类型，告诉浏览器使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--head代表网页头部-->
<head>
<!--  meta描述网站一些信息  -->
<!--  meta一般用来做SEO  -->
    <meta charset="UTF-8">
    <meta name="keywords" content="我的第一个网站"/>
    <meta name="description" content="hahaha">
    <!--网页标题-->
    <title>My First Web</title>
</head>
<!--body网页主题-->
<body>
Hello,World!
</body>
</html>

常用基本标签

包括<h1></h1>等标题标签，<p></p>段落标签，<hr/>水平线标签，<br/>换行标签。
还有可以直接对字体进行修饰的标签<strong>加粗，<em>斜体等。
还有很多特殊符号例如 空格，>大于号，<小于号，©版权符号等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>

<!--段落标签-->
<h2>乐游原 / 登乐游原</h2>
<h5>唐代：李商隐</h5>
<p>向晚意不适，驱车登古原。</p>
<p>夕阳无限好，只是近黄昏。</p>

<!--水平线标签-->
<hr/>

<!--换行标签-->
向晚意不适，驱车登古原。<br/>
夕阳无限好，只是近黄昏。<br/>

<!--粗体斜体-->
<strong>I love u</strong>
<em>I love u</em><br/>

<!--特殊符号-->
空格:&nbsp;&nbsp;空格
<br/>
大于号:&gt;
<br/>
小于号:&lt;
<br/>
&copy;版权所有

</body>
</html>

图像、链接标签

<img>图像标签，<a>链接标签，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接</title>
</head>
<body>

<!--使用name标记-->
<a name="top">顶部</a>

<!--a标签
href：必填
target:表示窗口在哪里打开
    _blank:当前
    _self：另一个
-->

<a href="3.photo.html" target="_blank">点击我跳转</a>
<a href="https://www.baidu.com" target="_self">点击我跳转</a>

<br>

<p>
    <a href="1.First.html">
        <img src="../resources/image/1.jpg" alt="图片加载失败" title="Photo" width="600" height="400">
    </a>
</p>
<p>
    <a href="1.First.html">
        <img src="../resources/image/1.jpg" alt="图片加载失败" title="Photo" width="600" height="400">
    </a>
</p>
<p>
    <a href="1.First.html">
        <img src="../resources/image/1.jpg" alt="图片加载失败" title="Photo" width="600" height="400">
    </a>
</p>
<p>
    <a href="1.First.html">
        <img src="../resources/image/1.jpg" alt="图片加载失败" title="Photo" width="600" height="400">
    </a>
</p>


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

<a name="down">底部</a>


<!--功能性链接
邮件链接：mailto
QQ链接

-->

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

<a target="_blank" href="1.First.html">
    <img src="../resources/image/1.jpg" alt="图片记载失败" width="50" height="50">
</a>

</body>
</html>

列表，表格，媒体标签，内联标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
<!--有序列表order list-->
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>Linux</li>
    <li>前端</li>
    <li>C/C++</li>
</ol>
<hr>
<!--无序列表
导航，侧边栏
-->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>Linux</li>
    <li>前端</li>
    <li>C/C++</li>
</ul>

<!--自定义列表 define list define title
dl：标签
dt：列表标题
dd：列表内容
网站底部
-->
<dl>
    <dt>学习</dt>
    <dd>Java</dd>
    <dd>Python</dd>
    <dd>C</dd>
    <dt>位置</dt>
    <dd>江苏</dd>
    <dd>云南</dd>
    <dd>杭州</dd>
</dl>

<!--表格
行   table rows  tr
列   table date  td
-->

<table  border="1px">
 <tr>
      <!--跨列-->
      <td  colspan="4">1-1</td>
  </tr>
 <tr>
      <!--跨行-->
      <td  rowspan="2">2-1</td>
     <td>2-2</td>
     <td>2-3</td>
     <td>2-4</td>
 </tr>
 <tr>
     <td>3-1</td>
     <td>3-2</td>
     <td>3-3</td>
  </tr>
</table>

<!--音频和视频
src:资源路径
controls:控制条
autoplay:自动播放
-->
<video  src="../resources/video/测试.mp4" controls autoplay width="600px" height="450px"></video>

<audio  src="../resources/audio/1.flac" controls></audio>

<!--iframe
src：地址
w-h：宽高
name
-->
<iframe  src="" name="hello" frameborder="0" width="800px" height="450px"></iframe>

<a  href="https://www.baidu.com" target="hello">点击跳转</a>

</body>
</html>

表单

<!DOCTYPE html>
<html  lang="en">
<head>
 <meta  charset="UTF-8">
 <title>登录注册</title>
</head>
<body>
<!--
method：必填，表示什么请求方式
action：必填：表示向何处发送表单，可以是网站，也可以是一个处理地址
 get方式提交:我们可以在url中看到我们提交的信息，不安全，高效 post：比较安全，可以传输大文件-->
<h1>注册</h1>
<form  action="1.First.html" method="post">
  <!--文本输入框
 value="请输入名字" maxlength="8" size="30" readonly hidden disable value：默认值 placeholder：提示信息 required：非空判断 pattern：正则表达式 -->  
 <p>名字：
     <input  type="text" name="username" placeholder="请输入用户名" required>
 </p>
 <p>密码：
     <input  type="password" name="pwd" value="123" hidden>
 </p>

  <!--单选框-->
  <p>性别：
        <input  type="radio" value="boy" name="sex" checked/>男
        <input  type="radio" value="girl" name="sex" disabled>女
    </p>

  <!--多选框-->
  <p>
  爱好：
        <input  type="checkbox" value="sleep" name="hobbies">睡觉
        <input  type="checkbox" value="coding" name="hobbies">代码
        <input  type="checkbox" value="Animal" name="hobbies" checked>动漫
        <input  type="checkbox" value="fishing" name="hobbies">钓鱼
        <input  type="checkbox" value="camping" name="hobbies">野炊
    </p>

  <!--按钮
 input type="button" input type="image" input type="submit" input type="reset" -->  
 <p>按钮
        <input  type="button" name="btn1" value="点击变长">
<!--        <input type="image" src="../resources/image/1.jpg" width="60px" height="30px">-->
  </p>

  <!--下拉框-->
  <p>
  下拉框：
        <select  name="别表名称" id="">
 <option  value="shagnhai">上海</option>
 <option  value="nanjing">南京</option>
 <option  value="suzhou" selected>苏州</option>
 <option  value="hangzhou">杭州</option>
 </select>
 </p>

  <!--文本域-->
  <p>
  反馈
        <textarea  name="textarea" cols="50" 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>URL：
        <input  type="url" name="url">
 </p>

  <!--数字-->
  <p>年龄：
        <input  type="number" name="num" max="130" min="0" step="10">
 </p>

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

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

  <!--增强鼠标可用性-->
  <p>
 <label  for="mark">你点我试试：</label>
 <input  type="text" id="mark">
 </p>

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

 <p>
 <input  type="submit" value="提交信息">
 <input  type="reset" value="清空表单">
 </p>

</form>

</body>
</html>

html

本作品采用《CC 协议》，转载必须注明作者和本文链接

HuDu

版主 816 声望

我好菜啊(=_=)

2 人点赞

讨论数量: 1

Galois

版主 1.4k 声望 / Coder @ Galois

牛皮,非常浓缩

3年前评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容，与人为善，比聪明更重要！

帮助

HTML5 基础

HTML基本结构

常用基本标签

图像、链接标签

列表，表格，媒体标签，内联标签

表单

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

HTML5 基础

HTML基本结构

常用基本标签

图像、链接标签

列表，表格，媒体标签，内联标签

表单

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

请登录