html基础

✻只影为谁去

已于 2023-04-13 16:49:58 修改

阅读量618

点赞数 1

分类专栏： html-study 文章标签：前端 html

于 2023-03-18 17:51:16 首次发布

原文链接：https://b23.tv/1J5MRYB

版权

html-study 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了HTML的基本概念，包括超文本标记语言的全称、HTML5的文档声明和字符编码。详细讲解了客户端/服务器(CS)和浏览器/服务器(BS)两种架构模式，以及客户端开发中的ReactNative和Vue+uni-app。此外，还涵盖了HTML的排版、标签语义化、图像标签、超链接的使用以及元信息等内容，是理解Web开发基础的全面指南。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一. 软件CS架构模式

Client(客户端)/Server，客户端需要安装软件，不跨平台，需要更新，适用大型安全性较高软件

二. 软件BS架构模式

Brower(浏览器)/Server，网页直接使用，跨平台，无更新

三. 客户端开发

React Native、Vue + uni-app

四. html全称

HyperText Markup Language:超文本标记语言

五. html5文档声明

  <!DOCTYPE html>

六. html字符编码

平时编码默认UTF-8

  <meta charset="UTF-8">
  //浏览器解码格式声明

七. html设置语言

  <html lang="zh-CN"></html>

八. html排版标签

标题标签
h1,h2, h3常用，h4,h5,h6不常用，h1一个页面只有一个，h1-h6不能互相嵌套

  <h1>标题1</h1>
  <h2>标题2</h2>
  <h3>标题3</h3>

段落标签
不能嵌套块级原素

  <p>段落</p>

九. html标签语义化

标签默认效果不重要，语义重要。好处是可读性强；利于SEO(搜索引擎优化)；方便设备解析(屏幕阅读器等）

十. html块级原素

独占一行，内部可以写块级原素和行内原素

十一. html行内原素

不独占一行，内部可以写行内原素，不能写块级原素

十二. html常用文本标签

标签	语义
em	着重阅读内容
strong	着重阅读内容，比em强烈
span	无语义，包裹容器，语义类似div

十三. html图片标签

  <img src="图片路径" alt="图片加载失败显示内容">
  //width，height设置一个会等比例改变

十四. html相对路径

符号	含义
./	当前目录
…/	上一目录

十五. html绝对路径

类型	含义
本地绝对路径	从电脑盘符开始的路径
网络绝对路径	在线网络上图片，有些有防盗链，用不了

十六. html常用图片格式

格式	特点
jpg（jpeg）	泛用，有损压缩，不支持透明背景和动态图
png	支持透明背景，无损压缩，不支持动态图
bmp	不进行压缩，不支持透明背景和动态图，占空间极大
gif	支持颜色少，支持简单透明背景，支持动态图
webp	需要解决兼容问题，支持上述格式优点，支持透明背景，支持动态图
base64	以文本格式保存的图片，src直接引入，一般"data:image/jpeg;base64,/"开头

十七. html超链接

跳转页面
a标签是行内原素，内部可以行内原素和块原素，不能写本身

  <a href="地址" target="_self"></a>
  //target="_self"(默认)，当前页面打开跳转
  //target="_blank",新页面打开跳转

跳转文件

  <a href="./xx.zip" download="文件名"></a>
  //跳转压缩包文件，触发下载
  //download属性直接触发下载

跳转锚点
锚点名称区分大小写，不能重复，除第一个会失效

  <a href="#xx">跳转到锚点</a>
  <a name="xx"></a>
  <div id="xx"></div>
  
  <a href="#"></a>//回到顶部
  <a href="地址#xx"></a>//跳转到某页面id=xx位置
  <a href="javascript:alert();"></a>//执行js脚本

唤起指定应用

  <a href="tel:手机号">电话</a>
  <a href="mailto:邮箱">邮件</a>
  <a href="sms:10086">短信</a>

十八. 超文本含义

"超文本"是连接单个网站内或多个网站间的链接

十九. html列表

ordered list 有序列表

  <ol>
    <li></li>
    <li></li>
  </ol>

unordered list 无序列表

  <ul>
    <li>
      <span>
        <ul>
          <li></li>
        </ul>
      </span>
    </li>
    <li></li>
  </ul>

definition list 自定义列表

  <dl>
    <dt></dt>
    <dd></dd>
    <dd></dd>
  </dl>

二十. html表格

  <table border="1" cellspacing="0">
  //height属性设置表格高度tbody内容随高度
    增加变高，thead高度不变，设置的是最小高度
  //cellspacing 内部边框距离
  //border设置外部表格边框宽度，内部边框宽度不变
    <caption>标题</caption>
    <thead align="center" valign="middle" height="50">
      <tr align="center" valign="middle" height="300">
        <th width="">name</th>
        <th colspan="4">age</th>
        //4表示跨4列
      </tr>
    </thead>
    <tbody align="center" valign="middle" height="50">
    //height不能小于table高度-caption-thead-tfoot
      <tr>
        <td rowspan="2">李明</td>
        //2表示跨2行
        <td>18</td>
      </tr>
    </tbody>
    <tfoot align="center" valign="middle" height="">
      <tr>
        <td></td>
        <td>共计:</td>
      </tr>
    </tfoot>
  </table>

二十一. html常用标签

  <br>//换行
  <hr>//分割线
  <pre></pre>按原文显示

二十二. html表单

基本结构

  <form action="https://search.jd.com/search" method="get" target="_blank">
    <input type="text" name="keyword">
    <button>搜索</button>
  </form>

文本框和密码框

  <input type="text" name="account" value="账户" maxlength="10">
  <input type="password" name="pwd">
  //value表示默认值

单选框

  <input type="radio" name="sex" value="female">
  <input type="radio" name="sex" value="male" checked>
  //checked默认选择

复选框

  <input type="checkbox" name="hobby" value="吸烟" checked>
  <input type="checkbox" name="hobby" value="喝酒">
  <input type="checkbox" name="hobby" value="烫头">

隐藏域

  <input type="hidden" name="tag" value="隐藏域">

表单提交与重置

  <input type="submit" value="提交">
  或
  <button type="submit">提交</button>
  //form表单button默认type="submit"
  <input type="reset" value="重置">
  <button type="reset">提交</button>

普通按钮

  <button type="button">普通按钮</button>

文本域和下拉框

  <textarea name="other" cols="5" rows="5"></textarea>
  <select name="place">
    <option value="冀" selected>河北</option>
    <option value="鲁">山东</option>
  </select>

表单禁用
input,button,textarea,option,select都可以用disabled属性
label标签
点击提示文字，聚焦到对应输入框

  <label for="zh">账户</label>
  <input id="zh" type="text" name="account" value="账户">

  <label>
    账户
    <input type="text" name="account" value="账户">
  </label>

fieldset与legend

  <fieldset>
    <legend>主要信息</legend>
  </fieldset>

二十三. 框架标签

嵌入广告网页，普通网页或其他

  <iframe src="" frameborder="0"></iframe>

与超链接标签target配合

  <a href="https://www.taobao.com" target="x">淘宝</a>
  <iframe name="x"></iframe>

与form表单target配合

  <form action="http://so.toutiao.com/search" target="y">
    <input type="text" name="keyword">
    <input type="button" value="搜索">
  </form>
  <iframe name="y"></iframe>

二十四. 字符实体

字符	实体名称
空格	或
<	&lt；
>	>
&	&
¥	¥
©️	©
×	×
÷	÷

二十五. html常用全局属性

属性名称	属性含义
id	给标签指定唯一标识，一个html里id不能重复
style	指定css样式
class	指定类名
lang	给标签指定语言
dir	内容靠左或靠右，值 : ltr；rtl
title	鼠标悬浮文字提示

二十六. meta元信息

  //字符编码配置
  <meta charset="UTF-8">
  //IE兼容配置
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  //移动端配置
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  //配置网页关键字
  <meta name="keywords" content="关键字1,关键字2">
  //配置网页描述
  <meta name="description" content="描述内容">
  //针对搜索引擎爬虫配置
  <meta name="robots" content="">
  //3秒后跳转到指定网页
  <meta http-equiv="refresh" content="3;网页">
  //作者
  <meta name="author" content="xx">
  //开发工具
  <meta name="generator" content="vscode">
  //版权信息
  <meta name="copyright" content="©️xxxxx">