前端笔记之html篇

小白从头开始学所做的笔记）

Web标准构成

主要包括：结构、表现和行为三个方面

<!DOCTYPE>文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页；

lang用来定义当前文档显示的语言；

字符集（cahracter set）是多个字符的集合，以便计算机能够识别和存储各种文字；

charset常用的值有：GB2312，BIG5，GBK和UTF-8，其中UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符集。

HTML常用标签

标题标签：<h1></h1>,<h2></h2>，<h3></h3>，<h4></h4>，<h5></h5>，<h6></h6>（字体大小依次来变小）

段落标签：<p></p>

换行标签：<br/>

加粗标签：<strong></strong>或<b></b>(推荐使用strong标签,因为atrong效果更好)

倾斜标签：<em></em>;<i></i>(推荐使用em标签,因为em效果更好)

删除线标签： <del></del>或<s></s>(推荐使用del标签,因为del效果更好)

下划线标签：<ins></ins>或<u></u>(推荐使用ins标签,因为ins效果更好)

div和span标签：是一个盒子，用来装内容，div是块级标签，span是行内标签

图像标签：<img src="图像 URL"/>

水平线标记：<hr/>

图像路径

相对路径：以引用文件所在位置为参考基础，而建立出的目录路径

绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径

超链接标签：<a href="跳转地址" target="目标窗口的弹出方式"> </a>作用从一个页面跳转到另外一个页面

描点连接：配合id选择器使用

注释：<!-- --!>

/**/

特殊字符： (空格)等

表格标签：<table></table> 作用于展示数据

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

<tr></tr> ----行

<td></td>----单元格，列

row="行数" cols="每行的字数"

<thead></thead>标签用于表格的头部区域；<tbody></tbody>标签用于表格的主题区域

无序列表：<ul><li></li></ul>

有序列表：<ol><li></li></ol>

自定义列表：<dl><dt><dd></dd></dt></dl>-----------dt是用于标题，dd是内容

表单的组成：

在HTML中，表单通常由表单域、表单控件和表单信息

from用于定义表单域，以实现用户信息的收集和传递

表单域标签：<from action="url地址" method="提交方式" name="表单域名称"></form>

其中name属性是表单的名字，相同的名字可以实现多选一

<lable>标签：用于绑定一个表单元素，当点击《lable》标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验

<select>表单元素：下拉表单元素，

</select>

select中至少包含一对option

textarea表单元素：<textarea></textarea>-----文本域标签

做登录界面可以用表格来做，能直接对齐

后续会更新后面的知识

TML是谁发明的？

1.HTML的全称是什么？

超文本标记语言（Hyper Text Markup Language)，是一种用于创建网页的标准标记语言。

2.谁发明的？

是由Tim Berners-Lee发明的。

HTML 起手应该写什么？

<!DOCTYPE html>
  <!--文档类型为html 此行必须为第一行 前面空一行也会报错-->
  <html lang="en">
    <!--html标签 en是英语 zh-CN是中文-->
    
    <head>
                 <meta charset="UTF-8">
                   <!--文件的字符编码-->
                   <meta name="viewport" content="width=device-width, initial-scale=1.0">
                     <!--content里的内容代表禁止缩放，兼容手机-->
                     <meta http-equiv="X-UA-Compatible" content="ie=edge">
                       <!--content里的内容表示让ie使用最新的内容-->
                       <title>Document</title>
    </head>

常用的表章节的标签有哪些，分别是什么意思?

h1-h6 标题
section 章节
article 文章
p 段落
header 头部
footer 脚部
main 主要内容
aside 旁支内容
div 划分，表示一个区块

全局属性有哪些？

class 用来对网页元素进行分类。如果不同元素的class属性值相同，就表示它们是一类的。
contentteditable HTML 网页的内容默认是用户不能编辑，contenteditable属性允许用户修改内容。
hidden hidden是一个布尔属性，表示当前的网页元素不再跟页面相关，因此浏览器不会渲染这个元素，所以就不会在网页中看到它。
id id属性是元素在网页内的唯一标识符
style 用来指定当前元素的 CSS 样式
tabindex 网页通常使用鼠标操作，但是某些情况下，用户可能希望使用键盘，或者只有键盘可以用。因此，浏览器允许使用 Tab 键，遍历网页元素。也就是说，只要不停地按下按钮 Tab 键，网页的焦点就会从一个元素转移到另一个元素，选定焦点元素以后，就可以进行下一步操作，比如按下回车键访问某个链接，或者直接在某个输入框输入文字。
title 用来为元素添加附加说明。大多数浏览器中，鼠标悬浮在元素上面时，会将title属性值作为浮动提示，显示出来。

常用的内容标签有哪些，分别是什么意思?

ol+li 有序列表
ul+li 无序列表
dl+dt+dd 自定义的列表
pre 显示文本中的空白符号
hr 分割线
br 换行
a 链接通过<a>标签表示，用户点击后，浏览器会跳转到指定的网址。
em <em>是一个行内标签，表示强调（emphasize），浏览器会以斜体显示它包含的内容。
strong <strong>是一个行内元素，表示它包含的内容具有很强的重要性，需要引起注意。浏览器会以粗体显示内容。
code 呈现一段计算机的代码，各类语言。
quote 行内的引用
blockquote 块的引用

TML基本结构

HTML基本结构

网页：由HTML(HyperText Markup Language)超文本标记语言所组成。文件后缀一般为.htm或.html

静态网页：由html、js、css等组成，不具备交互性。后缀一般为.htm或.html

动态网页：在html中加入asp/asp.net/jsp/php等技术，使网页有交互性，后缀一般为.asp/.aspx/.jsp/.php

网站：由一个或若干个网页、图片、音频、视频、动画、文件夹等组成的一个集合（文件夹）。

网站中的所有文件和文件夹均不能使用汉字命名。

首页：也叫主页/homepage,即打开网站时默认显示的第一个网页（http://www.XX.com,https://www.XX.cn），首页名称一般为index.html或default.html

标题标签：h1……h6,h1最大，h6最小

……

HTML注意事项：

1、html中的标点符号必须是英文输入法中的标点符号

2、HTML标签不区分大小写，但一般习惯小写；Html不区分空格、空行，html标签和属性、属性和属性之间用一个空格隔开，如<p align=”center” style=”color:red;”>；属性值一般放置在单引号或双引号中。

3、html标签必须放置在尖括号<>中

4、html标签一般是成对出现（双标签），结束标签在开始标签的基础上添加/，如<h1>……</h1>、<p>……</p>

如果是单标签则在右尖括号前加/，如<br />、<hr />、<img />

5、Html标签是包含关系，不要交叉书写。如<p><b><i>文字</i></b></p>,不要书写为<p><b><i>文字</p></b></i>

段落：<p>……</p>

分行：<br />

网页中支持的图像格式：jpg、gif、png、bmp，其中支持背景透明的有gif和png,支持动画的有：gif

图像：img

Src:图像的地址。 ./当前目录下 ../向上退一级目录 ../../向上退二级目录 /根目录

Width:宽度

Height:高度

在线咨询

上一篇：HTML5与Web前端什么关系？学好小程序，前端涨薪20%
下一篇：把HTML网页下载为单文件，可离线访问

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

前端笔记之html篇

小白从头开始学所做的笔记）

您的项目需求