html基础

html前端

html详解

什么是html？

  • HTML
    • Hyper,Text,Markup,Language(超文本标记语言)

W3C标准

  • World Wide Web Consortium(万维网联盟)
  • 成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构
  • http//www.w3.org/
  • http//www.chinaw3c.org/

W3c标准包括

  • 结构化标准语言（HTML、XML）
  • 表现标准语言（CSS）
  • 行为标准（DOM、ECMAScript）

网页的基本信息

  • DOCTYPE声明

  • <title>标签

  • 标签

  • 注释<！-- -->

网页基本标签

  • 标题标签

  • 段落标签

  • 换行标签

  • 水平线标签

  • 字体样式标签

  • 注释和特殊符号

  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--标题标签-->
<h1>1标签</h1>
<h2>2标签</h2>
<h3>3标签</h3>
<h4>4标签</h4>
<h5>5标签</h5>
<h6>6标签</h6>
<!--段落标签-->
<p>打开了大量肯德基</p>
<p>挖大网络大咖未来</p>
<!--水平线标签-->
<hr/>
<!--换行-->
打开了大家看啦五角大楼卡我<br/>
打开了大家看啦五角大楼卡我<br/>
<!--粗体斜体-->
<h1>字体样式标签</h1>
<strong>dwadjkawjd</strong>
<em>wadawldkaw;d</em>
<br/>
<!--特殊符号-->
空格 ：
空&ensp;格
&gt;
&lt;
&copy;
<!--
特殊符号记忆方式
-->

</body>
</html>

    图像标签

    常见的图像格式：

    • JPG
    • GIF
    • PNG
    • BMP位图
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>
<!--img
src：图片地址
     相对地址，绝对地址
     ../上一级目录
ait:图片名字（必填）
-->
<img src="../resources/image/头像.jpg"  alt="11"title="悬停文字" width="300" height="300">
</body>
</html>

连接标签

<!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="我的第一个网页.html" target="_blank">点击跳转</a>
<a href="我的第一个网页.html" target="_self">点击跳转</a>
</br>
<a href="我的第一个网页.html">
  <img src="../resources/image/头像.jpg"  alt="11"title="悬停文字" width="300" height="300" >
</a>
<p>
  <a href="我的第一个网页.html">
  <img src="../resources/image/头像.jpg"  alt="11"title="悬停文字" width="300" height="300" >
</a>
</p>
<p>
  <a href="我的第一个网页.html">
    <img src="../resources/image/头像.jpg"  alt="11"title="悬停文字" width="300" height="300" >
  </a>
</p>
<p>
  <a href="我的第一个网页.html">
    <img src="../resources/image/头像.jpg"  alt="11"title="悬停文字" width="300" height="300" >
  </a>
</p>
<p>
  <a href="我的第一个网页.html">
    <img src="../resources/image/头像.jpg"  alt="11"title="悬停文字" width="300" height="300" >
  </a>
</p>
<p>
  <a href="我的第一个网页.html">
    <img src="../resources/image/头像.jpg"  alt="11"title="悬停文字" width="300" height="300" >
  </a>
</p>
<!--锚链接
1,需要一个锚标记
2，跳转到标记
-->
<a href="#top">回到顶部</a>
<!--功能性链接
邮件标签：mailto
qq推广标签
-->
<a href="mailto:2207788214@qq.com">点击联系我</a>
</body>
</html>

块元素和行内元素

快元素：无论内容多少，该元素独占一行

行内元素：内容撑开宽度，左右都是行内元素的可以在排在一起

列表

  • 列表就是信息资源的一种展示形式，它可以使信息结构化和条理化，并以列表的样式显现出来，以便浏览者能更快捷地获得相应的信息

列表的分类：

  • 无序列表
  • 有序列表
  • 定义列表
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
<!--有序列表-->
<ol>
  <li>java</li>
  <li>py</li>
  <li>da</li>
  <li>cc</li>
</ol>
</hr>
<!--无序列表-->
<ul>
  <li>java</li>
  <li>py</li>
  <li>da</li>
  <li>cc</li>

</ul>
<!--自定义列表
dl:标签
dt：列表名称
dd：列表内容

-->
<dl>
  <dt>阿我都看啦我看到</dt>
  <dd>阿我打完</dd>
  <dd>当时发生的</dd>
  <dd>程序自动发</dd>
  <dd>广泛大锅饭的</dd>
</dl>

</body>
</html>

表格格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<!--创建表格table
行 tr   rows
lie td

-->
<table border="1px">
  <tr>
    <!--colspan跨列-->
    <td colspan="4">1-1</td>
  </tr>
  <tr>
<!--    rowspan跨行-->
    <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>




</body>
</html>

视频和音频

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素</title>
</head>
<body>
<!--&lt;!&ndash;音频和视频&ndash;&gt;-->
<!--src:资源路径-->
<!--controls：控制条-->
<!--autoplay：自动播放-->
<video src="../resources/audio/片头.mp4" controls autoplay></video>

<audio src="../resources/audio/WechatIMG1.jpeg " controls autoplay></audio>


</body>
</html>

页面结构分析

元素名 描述

header 标题头部区域的内容（用于页面或页面中的一块区域）

footer 标记脚部区域的内容（用于整个页面或页面的一块区域）

section Web页面中的一块独立区域

article 独立的文章内容

aside 相关内容或应用

nav 导航类辅助内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构</title>
</head>
<body>
<header>
  <h2>网页头部</h2>
</header>
<section>
  <h2>网页主题</h2>
</section>
<footer>
  <h2>网页脚步</h2>
</footer>
</body>
</html>

iframe内联框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>
<!--iframe内联框架
src：地址
w-h ：宽度高度
name

-->
<iframe src=""nama="hello" frameborder="0" width="1000" height="800"></iframe>
<a href="我的第一个网页.html">点击跳转</a>

</body>
</html>

功能

  • 表单
    • action:表单提交的位置，可以是网站，也可以是一个请求处理地址
      method:post，get 提交方式
      get方式提交，我们可以在url中看到我们提交的信息，不安全，高效
      post：比较安全，传输大文件
<form action="我的第一个网页.html" method="get">
  • 文本输入框
    • value="xxx" 默认初始值
    • maxlength="8" 最长能写几个字符
    • size="30" 文本框的长度
<p>名字:<input type="text" name="username" ></p>
  • 密码输入框
    • input type="password"
<p>密码:<input type="password" name="pwd"></p>
  • 单选框标签
    • <input type="radio"
    • value:单选框的值
    • name：表示组
<p>性别：
  <input type="radio" value="boy" name="sex" checked>男
  <input type="radio" value="girl" name="sex">女
</p>
  • 多选框
  <p>爱好
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="code" name="hobby" checked>代码
<input type="checkbox" value="chat" name="hobby">聊天
<input type="checkbox" value="game" name="hobby">游戏
  </p>
  • 按钮
    • <input type="button" 普通按钮
    • <input type="image" 图像按钮
    • 提交按钮
    • 重置按钮
   <p>按钮
  <input type="button" name="button1" value="点击变长">
     <input type="image" src="../resources/image/头像.jpeg">
   </P>
  • 下拉框，列表框
<p>国家：
  <select name="列表名称" >
    <option value="chian">中国</option>
    <option value="yindu">印度</option>
    <option value="eth"selected>瑞士</option>
    <option value="us">美国</option>
  </select>
</p>
  • 文本域
    • cols="50" rows="10"行列
<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="range"name="voice"max="100"min="0"step="2">
</p>
  • 搜索框
<p>搜索框：
  <input type="search"name="search">
</p>

表单的应用

  • 只读readonly
<p>名字:<input type="text" name="username"value="admin" readonly></p>
  • 禁用disabled
<input type="radio" value="boy" name="sex" checked disabled>男
  • 隐藏hidden
<p>密码:<input type="password" name="pwd"hidden value="12456"></p>
  • 增强鼠标可用性label
<p>
<label for="mark">你点我试试</label>
<input type="text" id="mark">
</p>

表单初级验证

  • placehlder提示信息
<p>名字:<input type="text" name="username" placeholder="请输入用户名"></p>
  • required必须填写
<p>名字:<input type="text" name="username" placeholder="请输入用户名"></p>
  • pattern正则表达式
<input type="text"name="diymail"pattern="xxx">
posted @ 2021-05-17 14:41  期待aaa  阅读(60)  评论(0)    收藏  举报