html5 （一）之基本标签、超链接及表格

块级元素：类似于段落标签、div，独占一行自动换行，什么都可以写
行级元素：类似于 input ，不能写块级元素
特殊规则：h1-h6不能嵌套,p标签里面不能写块元素

HTML5的基本骨架

<!DOCTYPE html>
<html lang="en">
<head>
   
</head>
<body>
    
</body>
</html>
  1. 第一种(语言-国家/地区)
  • zh-CN
  • en-US
  1. 第二种(语言-具体种类)
  • zh-Hans：中文-简体
  • zh-Hant：中文-繁体

DOCTYPE声明

DOCTYPE是document type的缩写，避免浏览器的怪异模式

head 元素

head标签用于定于文档的头部，定义了文档的各种属性和信息，包括标题，web中的位置以及和其他文档的关系

body 元素

body与head同级下，用于定义主体，包含文档的所有内容，会直接在页面上显示出来

title 元素

  1. 定义文档的标题
  2. 显示在浏览器的标题栏和状态栏上
  3. 写 head 一定要写 title
  4. title 的增加有利于SEO的优化
    ps：SEO是搜索引擎优化，通过对网站内容调整，满足搜索引擎的排名需求

meta 元素

meta 是一个单标签，用来描述HTML网页的属性，关键词，例如：<meta charset="UTF-8">

标题

<h1> </h1> 来进行定义标题，最高到<h6>，快捷键 h$*6

align 标题标签的位置摆放

  • align="left | right | center" 左侧|右侧|中间

段落标签

<p> </p>

换行单标签

<br>

水平分割线标签

<hr color="" width="" size="" ailgn=""/>

  1. color：颜色
  2. width：宽度，例如 300px
  3. size：高度
  4. ailgn：对齐方式，默认center

按照原文显示

<pre> 双标签

文本标签（双标签）

标签 描述
em 定义着重阅读文字，斜体效果
b 定义粗体文字
span 定义没有特定含义
i 定义斜体文字
strong 定义加重语气
del 定义删除字

文本标签一般标注词汇，记得带<>

img 图片单标签

<img src="" alt="" title="" width="" height="">

  • src:webp格式的图片路径名字
  • alt：规定图像替代的文本
  • width：规定图像宽度
  • height：规定高度（一般不规定）
  • title：鼠标停在图片上给予提示

ps:

  1. jpg：不支持透明背景图片，占用空间小
  2. png：无损，支持颜色丰富，透明背景
  3. bmp：不压缩，占用空间大，不支持透明背景
  4. gif：简单透明背景 + 简单透明背景
  5. webp：兼容性不好（去判断）
  6. base64：使用转码，适用于小的图片和需要网页一起加载的图片（无需发送请求，直接编译）

超文本链接

来设置
<a href="url">链接文本</a>

三种默认样式

  • 一个未访问的链接显示蓝色且带有下划线
  • 访问过的链接为紫色且有下划线
  • 点击链接时显示红色带下划线

ps：

  1. 链接文本可以是任意内容（图也可以），不允许 a 标签嵌套
  • 在当前页签打开（默认）文本`
  • 在另一个页签打开：<a href="url" target="_blank">文本</a>
  1. 浏览器可以打开，但会触发下载使用 download 属性
    <a href="url" download=“命名”>文本</a>

跳转锚点

一下有两种写法：
1）使用 a 标签 name 属性,注意 name 区分大小写

<a href="#hello">快速跳转</a>
<a name"hello"></a>
`<img src="" alt="">

2）使用 p 标签 id 属性(一般使用这个)，id 最好不要用数字

<a href="#atm">快速跳转</a>
<p id="atm">文本</p>
`<img src="" alt="">

回到顶部：<a href="#">回到顶部</a>
刷新页面：<a href="">刷新页面</a>
可以与JS脚本互动：<a href="javascripts:alert(666);">点我弹窗</a>

超链接唤醒指定应用

  • 唤起设备拨号：<a href="tel:10010">电话联系</a>
  • 唤起设备发送邮件：<a href="mailto:111111@xxx.com">邮件联系</a>
  • 唤起设备发送短信：<a href="sms:10010">短信联系</a>

列表标签(双标签)

有序列表 （Ordered list）

有序列表始于

    ，每个列表项始于
  1. （列表项：list items）

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

    ol 的 type 属性：

    <ol type="1"></ol>
<ol type="a"></ol>
<ol type="A"></ol>
<ol type="i"></ol>
<ol type="I></ol>

    ps: 连接最好用 li 标签去嵌套 a 标签

    • 列表嵌套：
    <ol>
   <li> 
       <span>你喜欢</span>
       <ul>
          <li>你猜猜<li>
       </ul>
   <li>
</ol>

    无序列表(unordered list)

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

    自定义列表(definition list)

    整体 dd 标签 里面可以嵌套列表
    <dt> 术语的标题，<dd> 术语的名称

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

    表格(双标签)

    表格：<table>
    行：<tr>
    表格标题：<caption>，单元格：<th>
    表格头部：<thead>
    表格主体：<tbody>，单元格：<td>
    表格脚注：<tfoot>,单元格：<td>

    常用属性：

    <table>

    <table border="1" width="" height="" cellspacing="0">

    • =当值大于 1 ，调整整体的边框，并没有控制单元格的
    • height：表格标题和脚注一直不会被更改
    • cellspacing：调整单元格间的缝隙，无法让单元格之间重合
      注意这里的值均为最少为多少

    <thead>

    <thead height="" align="" valign="">
    valign：垂直方向（可选值：top，bottom，middle）
    align： 水平方向

    <tbody height="" align="" valign="">

    <th>

    <th height="" align="" valign="" colspan="">

    • colspan：跨列，单位是列，值是跨越列数

    <td>

    <td height="" align="" valign="" rowspan="">

    • rowspan：跨行，值是跨越行数

    返回顶部

posted @   by1314  阅读(37)  评论(0)  编辑  收藏  举报
相关博文：
·  5. 各类元素总结
·  H5_新增的布局标签
·  HTML 5
·  HTML笔记—H
·  【精选】HTML5最全知识点集合
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
浏览器标题切换
浏览器标题切换end
点击右上角即可分享
微信分享提示