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>斜体等。
还有很多特殊符号例如&nbsp;空格,&gt;大于号,&lt;小于号,&copy;版权符号等。

<!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>
本作品采用《CC 协议》,转载必须注明作者和本文链接
讨论数量: 1

牛皮,非常浓缩

3个月前 评论

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