4

HTML 学习笔记

 3 years ago
source link: https://wiki-power.com/HTML%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

HTML 学习笔记

基本框架#

可打开 .html 文件，直接输入 html:5 调出

语句#

一些规范：

  1. 标签使用小写，元素必须闭合
  2. 空元素要加斜杠以闭合 eg. <br />
  3. 不使用语义化，所有样式都存放于 CSS 中，内容与样式分离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>标题</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<p>段落</p>
<!--换行符-->
<br />
<!--分割线-->
<hr />
<!--列表，可嵌套-->
<!--有序列表-->
<ol>
<li>第一项</li>
<li>第二项</li>
</ol>
<!--无序列表-->
<ul>
<li>第一项</li>
<li>第二项</li>
</ul>
<!--链接-->
<a href="https://www.google.com/">链接显示的文本</a>
<!--链接到页面特定位置，使用 ID 特性-->
<a href="#top">回到顶部</a>
<p id="top">顶部</p>
<!--链接到其他页面的特定位置-->
<a href="http://wiki-power.com/#top">跳转到站外页面的某个位置</a>
<!--图像-->
<img src="/xx.png" alt="无法加载时的文字说明" />
<!--表格-->
<table>
<!--第一行-->
<tr>
<!--第一列-->
<th></th>
<!--第二列-->
<th scope="col">周六</th>
<!--第三列-->
<th scope="col">周日</th>
</tr>
<!--第二行-->
<tr>
<th scope="row">数量</th>
<td>120</td>
<td>135</td>
</tr>
<!--第三行-->
<tr>
<th scope="row">收益</th>
<!--跨列 colspan，跨行 rowspan-->
<td colspan="2">500</td>
</tr>
</table>
<!--表单，待补充-->
<!--iframe，待补充-->
<!--flash/视频/音频，待补充-->
</body>
</html>

参考与致谢#

文章作者：Power Lin
原文地址：https://wiki-power.com
版权声明：文章采用 CC BY-NC-SA 4.0 协议，转载请注明出处。


report

Recommend

  • 39
    • www.cnblogs.com 4 years ago
    • Cache

    html入门详细笔记

    Web的基本概念 什么是Web? 中文翻译“网页”，它是一些列技术的总称，（包括网站的前台布局、后台程序、美工、数据库开发等），我们称它为网页。 Web标准 结构标准（HTML） 网页的结...

  • 8
    • www.guofei.site 3 years ago
    • Cache

    【html】笔记

    【html】笔记 2019年08月17日 Author: Guofei 文章归类: 语言，文章编号: 15001 版权声明：本文作者是郭飞。转载随意，但需要标明原文链接，并...

  • 7
    • blog.k4nz.com 3 years ago
    • Cache

    「HTML」- 学习笔记

    「HTML」- 学习笔记 「HTML」- 学习笔记 ...

  • 3
    • blog.diqigan.cn 3 years ago
    • Cache

    html + css 学习笔记

    css 中使用 /*注释内容*/ 来进行注释。 CSS 插入形式1. 内联式 把 css 代码直接写在现有的 HTML 标签中：<p style="color:red; font-size:12px"> 段落内容 </p>2...

  • 3
    • www.cnblogs.com 3 years ago
    • Cache

    html笔记 - zd13720

    html笔记 系统结构B/S架构（以后主要走的方向）Browser/Server （浏览器/服务器的交互形式）Browser支持哪些语言 HTML CSS J...

  • 12
    • sakurahack-y.github.io 2 years ago
    • Cache

    html学习笔记

    [TOC] 简单的HTML页面架构<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html> c...

  • 23
    • k-null.github.io 2 years ago
    • Cache

    HTML笔记-4

    一、css三大特性 1、层叠性​ 相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题 ​ 层叠性原则: 样式冲...

  • 5
    • k-null.github.io 2 years ago
    • Cache

    HTML笔记-5

    1. PS 切图 1.1. 常见的图片格式 序号 格式 特点和常用的用途 1 jpg JPEG（.JPG）对色彩的信息保留...

  • 5
    • k-null.github.io 2 years ago
    • Cache

    HTML笔记-7

    1. 精灵图（重点） 1.1 为什么需要精灵图1571482435259

  • 5
    • k-null.github.io 2 years ago
    • Cache

    HTML笔记-6

    1. 定位(position) 介绍 1.1 为什么使用定位 我们先来看一个效果，同时思考一下用标准流或浮动能否实现类似的效果？ 场景1：...

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK