学习笔记（一）HTML基础

时间：2022-10-24 23:06:48

HTML 基础

HTML 简介

HTML (Hyper textmarkup language) 中文译名为”超文本标记语言”，主要是通过 HTML 标记对网页中的文本、图片、声音等内容进行描述。

HTML 提供了许多标记,如段落标记,标题标记,超链接标记，图片标记等，网页中需要定义什么内容，就用相应的 HTML 标记描述即可。

HTML 之所以称为超文本标记语言,不仅是因为他通过标记描述网页内容，同时也由于文本中包含了所谓的“超级链接”点。通过超链接将网站与网页以及各种网页元素链接起来，构成了丰富多彩的 Web 页面。

HTML标准

目前最新的HTML版本是HTML5。

部分国内的网站还是使用XHTML标准，但是HTML5标准是趋势。

HTML结构

<html>

　　<head></head>

　　<body>

　　　　<h1>my first heading</h1>

　　　　<p>my first paragraph.</p>

　　</body>　

</html>

特点：成对出现，有开有闭合。尖括号括住了标签名。结束标签内增加了斜线。

语法：< 标签名 > 标签内容 </ 标签名 >。

  1. 标签成对出现。
  2. 结束标签内部用/开头。
  3. 标签可以嵌套。

HTML语法

HTML标签以 ”<” 开头。紧接着就是标签名 (中间没空格)。

标签名之后如果有属性的话，加空格然后是 属性名 = ” ”

如果有多个属性，属性间用空格隔开，空格可以有多个。

属性结束后可以加一个或多个空格。

然后是结束标签 ”>”，如果是闭合标签需要在标签名前加”/”，例如:< /html>。

单标签，斜线没有任何意义，可有可无。

标签中间可嵌套任何内容。

HTML标签

HTML 基本文档格式 < !DOCTYPE> 标签

< !DOCTYPE> 标记位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范。主要用于浏览器解析文档标签的依据。

必需在开头处使用 < !DOCTYPE> 标记为所有的 XHTML 文档指定 XHTML 版本和类型，只有这样的浏览器才能将该网页有效的 XHTML 文档，并按指定的文档类型进行解析。

< !DOCTYPE> 标记和浏览器的兼容相关，删除 < !DOCTYPE>，就是把如何展示 HTML 页面的权利交给浏览器。

HTML 基本文档格式 < html> 标签

< html> 标记位于 < !DOCTYPE> 标记之后，也称为根标记，用于告知浏览器其自身是一个 HTML 文档，< html> 标记标志着 HTML 文档的开始，< /html> 标记标志着 HTML 文档的结束，在他们之间的是文档的头部和主体内容。

<html>

   所有的标签必须写在两个闭合标签之间.

</html>

HTML 基本文档格式 < head> 标签

< head> 标记用于定义 HTML 文档的头部信息，也称为头部标记，紧跟在 < html> 标记之后。

head 标签定义的内容只是提供给浏览器使用。不用于用户的呈现。

主要用来封装其他位于文档头部的标记，例如 < title>，< meta>，< link> 及 < style>等，用来描述文档的标题,作者以及和其他文档的关系等。

一个 HTML 文档只能含有一对< head>标记，绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。

HTML 基本文档格式 < meta> 标签

<meta charset=”UTF-8”>

utf-8 是目前最常用的字符集编码方式,常用的字符集编码方式还有 gbk 和 gb2312 。

gb2312 简体中文。

GBK 包含全部中文字符繁体。

BIG5 繁体中文。

UTF-8 则包含全世界所有国家需要用到的字符。

从二进制说起，符号表示文字，表示的模式就是编码，类似电报。

Link 标签

引入 DNS 预先解析

<link rel=”dns-prefetch”href=”https://wildgrass.top”>

引入网站 icon 图标:

<link rel=”shortcuticon”href=”https://wildgrass.top/favicon.ico” />

引入 CSS 样式

<link rel=”stylesheet”href=”css/bg.css”>

图片标签

<img src=””title=”图片的标题” alt=”当图片不显示的时候,会显示alt属性的文本”>

Src：图片的网站。

Alt：图片不显示的时候，会显示 alt 属性的文本。

Title：对网站的 seo 有很大的影响，当鼠标移上去的时候，图片显示的 tip 提示文本内容

标题标签：h1-h6

< h1> 我是页面内容的标题 < /h1>

标题作为页面的标题性的内容，一定要符合语义.标题 1 到 6 数字不是定义标题的样式大小，而是定义标题在整个页面中的权重。

标题标签只能嵌套行内标签。< h1> 定义最大的标题， < h6> 定义最小的标题。

段落标签，行内标签

在网页中要把文字有条理的显示出来，离不开段落标记，就如同我们平常写文章一样，整个网页也可以分为若干个段落，而段落的标记就是< p>。

< p>段落文本< /p>

< p>是 HTM L文档中最常见的标记，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。

段落标签也只能嵌套行内标签。

水平线标记< hr />

在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单的通过标记来完成，< hr />就是创建横跨网页水平线的标记，其基本语法格式如下：< hr />是单标记,在网页中输入一个< hr />，就添加了一条默认样式的水平线。

HTML常用标签：

水平线标签：< hr>

换行标签：< br>，普通的空格和换行会进行合并。

文本格式化标签：

< em> 定义着重文字。

< i> 定义斜体字(不推荐)。

< strong> 定义加重语气。

< sub> 定义下标字。

< sup> 定义上标字。

< del> 定义删除字 。

HTML高级标签

列表

1. 无序列表

<body>

  　<ul>

    　<li>苹果</li>

  　    <li>橘子</li>

   　 <li>香蕉</li>

     <li>桃子</li>

　　</ul>

</body>

2. 有序列表

<body>

  　<ol>

    　<li>苹果</li>

  　    <li>橘子</li>

   　 <li>香蕉</li>

     <li>桃子</li>

　　</ol>

</body>

表格

在 HTML 网页中，想要创建表格，就需要使用表格和相关的标记。创建表格的基本语法格式如下：

<table>

　　<tr>

　　　　<td>单元格内的文字<td>

　　　　...

　　<tr>

<table>

表单

--在HTML中，一个完整的表单通常由表单控件(也称为表单元素)，提示信息和表单域3个部分构成,如下图所示，即为一个简单的HTML表单界面及其构成。　

学习笔记（一）HTML基础

Form 包裹标签，action:#

Input 文本框，单选按钮，多选按钮 type：checkbox，提交的按钮，按钮，重置的按。

< input type="text">

Typeradio 单选

< input type=”submit” value=”提交”>

< input type=”button” value=”普通的按钮”>

Checked 属性：标识单选或者多选按钮是否被选中，单属性。

Lable 标签，for 属性指向要提供服务的标签 ID 值。

Lable 直接包裹标签，可以实现点击标签的文字内容，让包裹的表单标签获得焦点。

Select 下拉列表，列表 multiple：单属性。

Option 设置我们的列表的选项。

Textarea 文本域标签：当输入大量的文本的时候需要使用文本域标签。

Cols 设置文本域可以输入多少列。

Rows 设置文本域的可以输入的行。

其他标签

Meta 标签：网站 SEO 关键词和描述

<meta name=”keywords”content=”招聘java、php、Android、ios、c/c++、网页设计讲师”>

<meta name=”description” content=”IT培训的龙头老大、年薪30-50万招聘JAVA、PHP、Android、IOS”>

Link 标签：引入 CSS

Script 标签：引入 js

target 属性补充： _blank _parent _self _top framename

Base 标签：可以让当前页面中的所有的a标签都拥有相同的属性

特殊标记字符

HTML为这些特殊字符准备了专门的替代代码

注释：名称对大小写敏感！实体名称和编号之间没有空格。

显示结果 描述 实体名称 实体编号
空格 & nbsp; &# 160;
< 小于号 & lt; &# 60;
> 大于号 & gt; &# 62;
& 和号 & amp; &# 38;
" 引号 & quot; &# 34;
' 撇号 & apos; (IE不支持) &# 39;
￠ 分（cent） & cent; &# 162;
£ 镑（pound） & pound; &# 163;
¥ 元（yen） & yen; &# 165;
€ 欧元（euro） & euro; &# 8364;
§ 小节 & sect; &# 167;
© 版权（copyright） & copy; &# 169;
® 注册商标 & reg; &# 174;
™ 商标 & trade; &# 8482;
× 乘号 & times; &# 215;
÷ 除号 & divide; &# 247;

HTML语义化

Web 语义化是指使用语义恰当的标签,使页面有良好的结构,页面元素有含义，能够让人和搜索引擎都容易理解。

标签与语义相结合，尽量不要使用没有语义的标签比如: div,span，尽量使用 p,ul,ol,table 等标签。

充分利用标签默认的含义

标题标签的选择

h1-h6、th、td、ul、ol、dl、dd、dt、p、em、strong

HTML5 的标签语义化更彻底。

HTML标签类型

HTML 标记一般分为块级和行内标记两种类型，它们也称为块元素和行内元素.具体如下：

块元素：

每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。

常见的块元素有 < h1>~< h6>、< p>、< div>、< ul>、< ol>、< li>等，其中 < div> 标记是最典型的块元素。

常见的行内标记有 < em> 、< i> 、< strong>、< sub> 、< sup>、 < del>等

学习笔记（一）HTML基础的更多相关文章

  1. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  2. Java学习笔记：语言基础

    Java学习笔记:语言基础 2014-1-31   最近开始学习Java,目的倒不在于想深入的掌握Java开发,而是想了解Java的基本语法,可以阅读Java源代码,从而拓展一些知识面.同时为学习An ...

  3. 卷积神经网络&lpar;CNN&rpar;学习笔记1：基础入门

    卷积神经网络(CNN)学习笔记1:基础入门 Posted on 2016-03-01   |   In Machine Learning  |   9 Comments  |   14935  Vie ...

  4. 【学习笔记】Linux基础（零）：预备知识

    学习笔记(连载)之Linux系列 Note:本学习笔记源自<鸟哥的Linux私房菜(基础学习篇)>一书,为此书重要内容的摘要和总结,对于一些常识性的知识不再归纳 新型冠状病毒引发的肺炎战& ...

  5. 【JAVAWEB学习笔记】06&lowbar;jQuery基础

    接05的学习笔记. 四.使用JQ完成省市二级联动 1.需求分析 使用jquery完成省市二级联动 2.技术分析 2.1数组的遍历操作 方式一: $(function(){ // 全选/ 全不选 $(& ...

  6. ios开发学习笔记001-C语言基础知识

    先来学习一下C语言基础知识,总结如下: 在xcode下编写代码. 1.编写代码 2.编译:cc –c 文件名.c 编译成功会生成一个 .o的目标文件 3.链接:把目标文件.o和系统自带的库合并在一起, ...

  7. HTML学习笔记之标签基础

    目录 1.基本标签 2.链接 3.图像 4.表格 5.列表 6.块与布局 1.基本标签 (1)标题与段落 标签 <h1> ~ <h6> 分别用于定义一至六级标题,标签 < ...

  8. Java学习笔记之—Java基础

    将学习到的JAVA基础用xmind记录了下来,需要原件的可以私信

  9. 《Python基础教程（第二版）》学习笔记 -&gt&semi; 第一章 基础知识

    写笔记的原因:书也看了一遍,视频也看了,但总是感觉效果不好,一段时间忘记了,再看又觉得有心无力,都是PDF的书籍,打开了就没有心情了,上班一天了,回家看这些东西,真的没多大精力了,所以,我觉得还是把p ...

  10. Java 学习笔记&lpar;1&rpar;——java基础语法

    最近抽时间在学习Java,目前有了一点心得,在此记录下来. 由于我自己之前学过C/C++,而Java的语法与C/C++基本类似,所以这一系列文章我并不想从基础一点点的写,我想根据我已有的C/C++经验 ...

随机推荐

  1. php清楚bom

    http://www.e7cms.com/article/myblog/20110322/3159.html

  2. codeforces A&period; Difference Row

    link:http://codeforces.com/contest/347/problem/A 开始看起来很复杂的样子,但是刚写下样例,就发现因为中间的都消去了,其实起作用的就是最大值和最小值=_= ...

  3. &period;NET技术大系概览 （迄今为止最全的&period;NET技术栈）

    从2002年的.NET 1.0开始,1.1,2.x,3.x,4.x,每个新版本的.NET都会增加新的技术,生态圈也在不断壮大. AD: 前言 .Net推出13年了,Visual Studio 2015 ...

  4. 五、python使用模块

    if __name__=='__main__':用法: 当我们在命令行运行模块文件时,Python解释器把一个特殊变量__name__置为__main__,而如果在其他地方导入该hello模块时,if ...

  5. &lt&semi;转&gt&semi;linux 下stm32开发环境安装

    传送门: http://www.eefocus.com/marianna/blog/13-10/298454_7e04f.html http://blog.sina.com.cn/s/blog_643 ...

  6. 写了交互给后台后来不能用？bug多多多又找不到文件效率低？工作流程帮你优化起来~~~~

    前端工作流程(多方交互篇) 新的网页: 1.跟美工沟通,跟产品沟通,跟后台沟通.前两者主要是页面样式.后者主要是表单交互.用哪个框架之类的. 2.实现.(写清楚哪块是用什么验证方式的)→ 给后台. 3 ...

  7. Python多线程下的&lowbar;strptime问题

    Python多线程下的_strptime问题 由于Python的datetime和time中的_strptime方法不支持多线程,运行时会报错: import datetimeimport threa ...

  8. 触摸屏touchstart 与 click

    设计效果:当手指点击或触摸红框线menuList之外的部分时,弹框menuList消失. 问题:在优化触屏版的时候发现如图问题.当menuList弹出.手指触摸屏幕向下滑动时,menuList弹框不消 ...

  9. JavaSE（七）之内部类

    上一篇我们学习了接口还有访问控制,在以后的工作中接口是我们经常要碰到的,所以一定要多去回顾.接下来介绍一下内部类.很多时候我们创建类的对象的时候并不需要使用很多次,每次只使用一次 这个时候我们就可以使 ...

  10. Python迭代

    本篇将介绍Python的迭代,更多内容请参考:Python学习指南 简介 在Python中,如果给定一个list或者tuple,我们可以通过for循环来遍历这个list或者tuple,这种遍历我们称为 ...

相关文章