HTML学习笔记

Node
字数统计: 2.6k   |   阅读时长≈ 11 分钟

前置知识

Web

结构 : HTML(超文本标记语言)

表现 : CSS(层叠样式表)

行为 : JavaScript(脚本语言)

参考文章 : Web 和 Web标准

文档参考网站 :

MDN(推荐)

W3School(推荐)

菜鸟教程

书籍推荐 ( 英文原版 ) :

Head First - HTML with CSS & XHTML

Head First HTML5 Programming Building Web Apps with JavaScript

(添加桌面pdf文件)

基本快捷键

Ctrl + C 复制

Ctrl + V 粘贴

Ctrl + X 剪切

Ctrl + Z 撤销

Ctrl + / 注释

Ctrl + S 保存

Ctrl + F 查找

基本快捷键

常用快捷键

编辑器

Sublime Text

HbuliderX

visual studio code

WebStorm10

DWCS6

浏览器分类

IE 内核Trident

Firefox(火狐) 内核Gecko

Safari 内核Webkit

Chrome(谷歌) Oprea 内核Blik

Edge 内核Chromiun和Blink

网络协议

http

参考文章 : HTTP

https

参考文章 : HTTPS

怪异模式和标准模式

参考文章 : 怪异模式和标准模式

标准

浏览器Web标准/W3C(万维网联盟)

参考文章 : W3C标准

W3C简介

VScode快捷键

快速生成HTML骨架快捷键

  • 英文”!” + Tab
  • 英文”!” + Enter
  • html + : (既英文冒号) + 5

Ctrl + Enter 双标签中转为下一行

Shift + Alt + ↓ 双标签中向下复制整行

HTML

定义

超文本标记语言

HTML 标记标签通常被称为 HTML 标签 (HTML tag)

参考文章 : 开始学习HTML

HTML简介

基本结构

1
2
3
4
5
6
7
8
<html>
    <head>
        <title>网页标题</title>
    </head>
    <boby>
    网页内容
    </boby>
</html>

参考文件 : HTML头部

语言

1
2
3
<html lang="en">
    <!-- en英文  zh-CN中文  fr法文-->
</html>

参考文章 : HTML语言代码参考手册

字符集Charset

1
2
3
4
<head>
    <meta Charset=" ">
    <!-- GB2312简体中文  BIG5繁体中文  GBK简体繁体中文  UTF-8(utf-8)所有语言-->
    </head>

参考文章 : HTML编码(字符集)

注释

1
2
3
<html>
     <!-- 注释 -->
</html>

参考文章 : HTML注释

基本约定

参考文章 : HTML(5)样式指南和代码约定

元素

元素( Element )指的是从开始标签（start tag）到结束标签（end tag）的所有代码

参考文章 : Element元素

HTML元素

HTML5 语义元素

块级元素(块元素)

独占一行 , 只能出现在<body> </body>元素内。

例 :

<h1>~`

` <form> dl <dd> <hr> <ol> <ul> <p> <table> <div> <adress> , <article> , <aside> , <bolckquote> , <fieldest> , <figcaption> , <figure> , <footer>, <header , <hgroup>, ,<pre> , <section> ,

参考文章 : 块级元素

行内元素(内联元素)

只占据它对应标签的边框所包含的空间。

例 : <b> <strong> —— 字体加粗

<big> <small> —— 字体改变大小

<i> <em> —— 字体倾斜

<u> <ins> —— 字体添加下划线

<s> <del> —— 字体添加删除线

<br> —— 换行

<input> <textarea> <img> —— 添加图片<span>

<q> ——引用标签

<label>—— 定义标注标签 , 配合<input>按钮使用增加用户体验

<tt> , <abbr> , <acronym> , <cite> , <code> , <dfn> , <kbd> , <samp>, <var.a> , <bdo>, , <map> , <object> ,, <script>, , <sub> , <supbutton> ,<select>

参考文章 : 行内元素

HYMLdiv和span

标签

声明标签
1
2
3
4
5
<head>
    <!DOCTYPE>
    <!-- 文档类型声明标签 -->
    <!-- doc文档,type类型 -->
</head>

参考文章 : HTML<!DOCTYPE>

根标签

<html> </html>

骨架标签
1
2
3
4
5
6
7
8
<html>
	<head>
        <title>
        </title>
	</head>
	<body>
	</body>
</html>
<meta> 标签

提供有关页面的元信息。位于文档的头部，不包含任何内容。 在 HTML 中， 标签没有结束标签。

参考文章 : HTMLmeta标签

双标签

标题标签

<h1></h1>~`

`

参考文章 : HTML标题

h1–h6：HTML 区域标题元素

段落标签

<p></p>

可根据浏览器页面大小改变每行字数

参考文章 : HTML段落

p

盒子标签

<div> </div> —— 单独占一行 , 此标签内可存放任何标签和内容

参考文章 : div：内容划分元素

<span> </span> —— 一行可存在多个

等

参考文章 : span

有序列表标签

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

<li> </li> —— 标签内可存放任何标签和内容

1
2
3
4
5
6
<body>
    <ul>
        <li>内容</li>
        <li>内容</li>
    </ul>
</body>

参考文章 : ol

无序列表标签

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

<li> </li> —— 标签内可存放任何标签和内容

1
2
3
4
5
6
<body>
    <ol>
        <li>内容</li>
        <li>内容</li>
    </ol>
</body>

参考文章 : ul

自定义列表标签

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

dt只有一个 , dd有很多个

1
2
3
4
5
6
7
<body>
    <dl>
        <dt></dt>
        <dd></dd>
        <dd></dd>
    </dl>
</body>

参考文章 :

参考文章 : HTML列表

单标签

<br>或<br/>—— 换行 ( 只能在HTML5中去掉 “/“ ) ,

<nobr>或<nobr/> —— 不换行 ,

<hr>或<hr/> —— 水平线 ,

<img> —— (必带属性 : src=" ”) 插入图片 ,

<input> —— 输入，表单控件 ,

<link> —— 链接，关联

等

实体

参考文章 : HTML字符实体

HTML符号

空格实体

&nbsp; —— 不换行空格 , 既空格键

&ensp; ——半角空格 , 字体度的一半

&emsp; —— 全角空格 , 16px

&thinsp; ——窄空格

&zwnj; ——零宽不连字

&zwj; —— 零宽连字

参考文章：HTML中的& nbsp; & ensp; & emsp;等6种空格标记

路径

相对路径(常用)

../ —— 向上一个文件夹返回查找文件 , 不能跨储存盘

./ —— 可查找当前根目录所有文件

绝对路径

\ ——可跨储存盘

或直接输入文件地址

参考文章 : HTML文件路径

路径

图片

直接插入图片 : 

1
2
3
<body>
    <img src="">
</body>

图片替换的文字 : alt=" "

提示文本 : title=" "

修改图片大小 : 图片的width(宽)和height(高)可一起修改 , 若只写其中一个 , 图片等比例缩放

参考文章 : HTML图像

img：图像嵌入元素

链接

链接外地网址 :

1
2
3
4
5
6
<body>
    <a href=""></a>
    <!--不写target属性则默认在当前网页打开-->
    <!--target="_self"在当前网页打开-->
    <!--target="_blank"在新的网页打开-->
</body>

链接内部网址

  1. 添加其他的html文件 : <a href=""(文件位置)></a>

  2. 回到顶部 : <a href=" "> 或 <a href="#">

  3. 不回顶部 : <a href="javascript:;"></a>

下载链接

添加zip文件 : <a href=" "(zip文件位置)></a>

锚链接

寻找 : <a href="#+锚链接名字">名字</a>

定位 : <id = "锚链接名字">

参考文章 : HTML链接

表格

表格标签

<table> </table>——表格

<tbody> </tbody> ——表格主体

<thead> </thead> ——表格头部

<th> </th> ——表头单元格

<tr> </tr> ——行

<td> </td>——单元格

<ul><lul>——无序的列表

<li></li>——列表项

表格属性

height ——表格高

width ———表格宽

border ———表格边框——默认1 , “ “——代表没有边框

align ———表格对齐方式

lift——居左

center ———居中

right ——居右

cellpadding ——像素值——单元格与内容的距离——默认1像素

cellspacing ——像素值——单元格之间距离——默认2像素

合并表格

跨行合并——rowspan="——从上到下合并，最上面开始，以下删除
跨列合并——colspan=" "——从左到右合并，最左边开始，以右删除

参考文章 : table

HTML表格

表单

表单在网页中主要负责数据采集的功能，和向服务器传送数据

表单标签 : 包含了处理表单数据所用 CGI 程序的 URL, 以及数据提交到服务器的方法

表单域 : 包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框、和文件上传框等。

表单按钮 :包括提交按钮，复位按钮和一般按钮；用于将数据传送到服务器上的 CGI 脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

后台地址 : xxx.php

参考文章 : HTML表单

HTML表单属性

HTML表单元素

HTML输入类型

HTML input属性

input

表单控件 :

<input> : 输入列表 <input type="属性值">

默认属性值为text , 即 <input type="text"> , 文本框 , 单行 , 默认20个字符

password : 密码框

value : 规定input元素的值 , 用户自定义

placehloder : 占位符 , 提示作用

select : 下拉列表

1
2
3
4
5
6
7
8
9
<body>
    <form>
        <select>
            <option></option>
            <option></option>
            <!--至少要含有一对option标签-->
        </select>
    </form>
</body>

<textare> : 文本域 : 文本框可放大缩小

<textare cols=" "(每行的字数)>(一般用css制作)

<textare rows=" "(显示的行数)>(一般用css制作)

参考文章 : input

textarea

只能在表单内使用的按钮(可放入图标/图片)

<input type="submit"> : 默认按钮内文字 “ 提交 “

<input type="reset"> : 默认功能重置 , 清除以上所有信息

按钮

没有位置限制的按钮 :

<input type="button"> : 普通按钮 , 没有实质作用 , 需后期js添加功能

<button> </button>

参考文章 : button

上传文件的按钮 : 

1
<input type="file">

图片按钮 : 

1
`<input type="image src=" " ">

隐藏域

hidden : 属性 , 隐藏的输入字段 , 不给用户使用 , 程序员写给后台进行其他用途

参考文章 : hidden

思维导图

  • 版权声明： 本博客所有文章除特别声明外，著作权归作者所有。转载请注明出处！

You Found Me.

支付宝
微信