HTML浅学一下:多看手册多写代码

HTML是什么?

1、HTML是用来编写网页的

2、浏览器解析页面,只能识别HTML、CSS、JavaScript

3、HTML 页面的结构、内容;CSS 页面的样式;JavaScript 动态修改页面,与后端交互等

HTML案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HelloWorld</title>
</head>
<body>
  <h1>HelloWorld</h1>
  <p>HelloWorld</p>
</body>
</html>

<!DOCTYPE html>,声明html的版本为html5。这也是目前最常用的html版本。

常用标签

标题:h1~h6

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>标题标签:h1~h6</h1></title>
  </head>
  <body>
    <h1>h1标签</h1>
    <h2>h2标签</h2>
    <h3>h3标签</h3>
    <h4>h4标签</h4>
    <h5>h5标签</h5>
    <h6>h6标签</h6>
  </body>
</html>

段落:p

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>段落</title>
</head>
<body>
  <p>我是一个段落</p>
</body>
</html>

文本格式化

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文本格式化</title>
</head>
<body>
  <b>b加粗</b><hr/>
  <strong>strong加粗</strong><hr/>
  <i>i斜体</i><hr/>
  <em>em斜体</em><hr/>
  <small>small小号字</small><hr/>
  <sub>下标字</sub><hr/>
  <sup>上标字</sup><hr/>
  <ins>插入字</ins><hr/>
  <del>删除字</del><hr/>
</body>
</html>

链接:a

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>连接:a</title>
</head>
<body>
  <a href="https://www.baidu.com" target="_blank" title="baidu">逛百度</a>
  <a href="#maodian">我跳转到锚点</a>
  <a name="maodian">我是锚点</a>
</body>
</html>

head中定义的属性

  • meta:文档元信息
  • title:文档标题
  • base:文档内链接默认标签
  • style:css样式
  • link:外部css、js
  • script:文档内js

html中定义css

  • 内联样式:标签的style属性中定义样式
<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>
  • 内部样式:style标签中定义样式
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
  • 外部样式:link引入css文件
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

图片:img

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

表格:tr、td、th

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表格</title>
</head>
<body>
  <table border="2">
    <thead>
      <tr>
        <th>列标题1</th>
        <th>列标题2</th>
        <th>列标题3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>行1,列1</td>
        <td>行1,列2</td>
        <td>行1,列3</td>
      </tr>
      <tr>
        <td>行2,列1</td>
        <td>行2,列2</td>
        <td>行2,列3</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

列表:ul、ol、li

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>列表</title>
</head>
<body>
  <h1>无序列表</h1>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <h1>有序列表</h1>
  <ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ol>
</body>
</html>

区块元素:div、span

html中的每一个元素都可以分为块级元素和行内元素。

他们在html中有不同的展现策略。

如果需要需要将一堆html元素整合在一起,以一个整体进行操作,这个时候我们往往会在这些元素的外层包裹div。

把div理解为画布就行

div,是块级元素,浏览器在展示的时候永远会新起一行

span,是内敛元素,并不会新起一行,一般用来包裹文字

html布局

html是无法单独布局的,往往需要结合css才行。

在古早时期,才会使用html的table实现布局。

本质上就是把画面当做一个表格,然后通过单元格在横纵坐标方向上的合并,实现排版的效果,

目前已经没人在这么干了

表单:form、input、label、select

网页除了展示之外,另一个重要功能就行执行用户交互。

用户是通过表单将数据传递给后端的。

而一次提交的数据,就是被封装在了一个表单中。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表单</title>
</head>
<body>
  <form action="/" method="post"></form>
    <!-- 文本输入框 -->
    <label for="name">用户名:</label>
    <input type="text" id="name" name="name" required>

    <br>

    <!-- 密码输入框 -->
    <label for="password">密码:</label>
    <input type="password" id="password" name="password" required>

    <br>

    <!-- 单选按钮 -->
    <label>性别:</label>
    <input type="radio" id="male" name="gender" value="male" checked>
    <label for="male"></label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female"></label>

    <br>

    <!-- 复选框 -->
    <input type="checkbox" id="subscribe" name="subscribe" checked>
    <label for="subscribe">订阅推送信息</label>

    <br>

    <!-- 下拉列表 -->
    <label for="country">国家:</label>
    <select id="country" name="country">
        <option value="cn">CN</option>
        <option value="usa">USA</option>
        <option value="uk">UK</option>
    </select>

    <br>

    <!-- 提交按钮 -->
    <input type="submit" value="提交">
</form>
</body>
</html>

iframe

当需要在页面中嵌入页面的时候,会用到iframe功能

<iframe src="URL"></iframe>

html5新特性

以上都是最基础的html标签,在html中提供了更多的功能

新元素

标签描述
<canvas>标签定义图形,比如图表和其他图像。该标签基于 JavaScript 的绘图 API

新多媒体元素

标签描述
<audio>定义音频内容
<video>定义视频(video 或者 movie)
<source>定义多媒体资源 <video> 和 <audio>
<embed>定义嵌入的内容,比如插件。
<track>为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。

新表单元素

标签描述
<datalist>定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。
<keygen>规定用于表单的密钥对生成器字段。
<output>定义不同类型的输出,比如脚本的输出。

新的语义和结构元素

HTML5提供了新的元素来创建更好的页面结构:

标签描述
<article>定义页面独立的内容区域。
<aside>定义页面的侧边栏内容。
<bdi>允许您设置一段文本,使其脱离其父元素的文本方向设置。
<command>定义命令按钮,比如单选按钮、复选框或按钮
<details>用于描述文档或文档某个部分的细节
<dialog>定义对话框,比如提示框
<summary>标签包含 details 元素的标题
<figure>规定独立的流内容(图像、图表、照片、代码等等)。
<figcaption>定义 <figure> 元素的标题
<footer>定义 section 或 document 的页脚。
<header>定义了文档的头部区域
<mark>定义带有记号的文本。
<meter>定义度量衡。仅用于已知最大和最小值的度量。
<nav>定义导航链接的部分。
<progress>定义任何类型的任务的进度。
<ruby>定义 ruby 注释(中文注音或字符)。
<rt>定义字符(中文注音或字符)的解释或发音。
<rp>在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容。
<section>定义文档中的节(section、区段)。
<time>定义日期或时间。
<wbr>规定在文本中的何处适合添加换行符。

web存储:localStorage 和 sessionStorage

客户端存储数据的两个对象为:

  • localStorage - 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除。
  • sessionStorage - 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。

sse的支持

websocket的支持

HTML学习总结

HTML甚至不能称之为一种编程语言,就是一种标记符号。由标签和属性构成。

日常中常用的标签、属性,用的多了也就熟悉了。对于不熟悉的部分,知道有这么些个东西,用的时候查阅手册即可。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值