Hyper text markup language 超文本标签语言。不是一种编程语言，而是一种标记语言标记语言是一套标记标签

开发工具

chrome
subline
vscode
photoshop

浏览器内核

IE内核	Trident
Firefox	Gecko
Safari苹果浏览器	Webkit
Chrome	Chromium/blink
Operapresto	presto

html骨架

HTML标签：所有html标签中的根节点
Head标签：文档头部，描述文档的各种属性和信息。包括文档的标题、在Web中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。如<！DOCTYPE>声明了htm版本为html5版本
Title标签：文档的标题
Body标签：文档的主体，素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）

html标签分类

html标签分类分为双标签和单标签，双标签具有嵌套关系、并列关系，如<div></div>；单标签有：<input/>、<img/>

html标签

特殊

<link> ：定义文档与外部资源的关系，最常见的用途是链接样式表
```
<head>

<link rel="stylesheet" type="text/css" href="theme.css" />

</head>
```
属性
- charset——html5不支持
- href url ——规定被链接文档的位置
- hreflang language_code——规定被链接文档中文本的语言
- medi media_query——规定被链接文档将被显示在什么设备上
- rel alternate\author\help\icon\licence\next\pingback\ prefetch\prev\search\sidebar\stylesheet\tag——规定当前文档与被链接文档之间的关系
- type MIME_type——规定被链接文档的 MIME 类型

<meta>：定义了与文档相关联的名称/值对。提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。标签位于文档的头部
```
<meta name="keywords" content="HTML,ASP,PHP,SQL">

<meta http-equiv="charset" content="iso-8859-1">

<meta http-equiv="expires" content="31 Dec 2008">

//这样发送到浏览器的头部就应该包含：

content-type: text/html

charset:iso-8859-1

expires:31 Dec 2008
```
属性
- *content some_text——定义与 http-equiv 或 name 属性相关的元信息
- http-equiv content-type\expires\refresh\set-cookie ——把 content 属性关联到 HTTP 头部。当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档
- name author\description\keywords\generator \revised\others——把 content 属性关联到一个名称。比如"keywords" 是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。
- scheme some_text——定义用于翻译 content 属性值的格式

排版标签

名称	语义	例子
标题标签	head	`<h1></h1>`，`<h2></h2>`..`<h6></h6>`
段落标签	paragraph	`<p></p>`
水平线标签	horizon	`<hr/>`
换行标签	break	`<br/>`
div标签		`<div> </div>`
span标签		`<span></span>`

文本格式化标签

名称	语义	例子
粗体	strong	`<b></b>` `<strong></strong>`
斜体		`<i></i>` `<em></em>`
加删除线	delete	`<s></s>` `<delb</del>`
下划线	underline	`<u></u>` `<ins></ins>`

图像标签img

属性	属性值	描述
src	url	图像路径
alt	文本	图像不能显示时的替换文本
title	文本	鼠标悬停时显示的内容
width	像素（XHTML不支持%页面百分比）	图像宽度
height	像素（XHTML不支持%页面百分比）	图像高度
border	数字	图像边框宽度

链接标签a

属性	属性值	描述
href	Url	用于指定链接目标的url地址，Hypertext Reference的缩写。意思是超文本引用
target	self_blank	用于指定链接页面的打开方式，其中self为默认值，blank为在新窗口中打开方式。

herf

1. 外部链接 需要添加 `http://`

2. 内部链接 直接链接内部页面名称即可 比如 `< a href="index.html"/>`

3. 空连接 `href="#"`

4. 锚点定位

	——本页面跳转

		1. 给想要跳转的标签添加id名

		2. 点击可跳转id名标签所在位置<a href="#id名></a>

	——跳转到其他页面的锚点

		1. <a id="test">锚</a>

		2. <a href="test2.html#test"></a>

特殊字符标签

列表标签

类别	描述
无序列表	各个列表项之间没有顺序级别之分，是并列的
有序标签	有排列顺序的列表，其各个列表项按照一定的顺序排列定义
自定义列表	定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。

//无序

<ul>

  <li>列表项1</li>

  <li>列表项2</li>

  <li>列表项3</li>

  ......

</ul>

//有序

<ol>

  <li>列表项1</li>

  <li>列表项2</li>

  <li>列表项3</li>

  ......

</ol>

//自定义

<dl>

  <dt>名词1</dt>

  <dd>名词1解释1</dd>

  <dd>名词1解释2</dd>

  ...

  <dt>名词2</dt>

  <dd>名词2解释1</dd>

  <dd>名词2解释2</dd>

  ...

</dl>

 注意：

 1. <ul>中只能嵌套<li>直接在<ul>标签中输入其他标签或者文字的做法是不被允许的。

 2. <li>与</li>之间相当于一个容器，可以容纳所有元素。

 3. 无序列表会带有自己样式属性

表格标签

类别	描述	语法
表头标签	表头一般位于表格的第一行或第一列，其文本加粗居中。用表头标签替代相应的单元格标签	`<tr> </tr>` `<th><th/>`
表头标题	caption 元素定义表格标题。	`<caption></caption>`
表格结构	表格可划分为头部、主体和页脚 `<thead></thead>`用于定义表格的头部。必须位于`<table></table>` 标签中，一般包含网页的logo和导航等头部信息。 `<tbody></tbody>`用于定义表格的主体。位于`<table></table>`标签中，一般包含网页中除头部和底部之外的其他内容。	`<thead><thead/>` `<tbody><tbody>`

<table>

  <tr>

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

    ...

  </tr>

  ...

</table>

<tr>

	<th>表头<th/>

</tr>

<table>

   <caption>表格标题</caption>

</table>

<table>

	<thead><thead/>

	<tbody><tbody>

<table/>

属性名	属性值	含义
border	设置表格的边框（默认border=“0”无边框）	像素值
cellspacing	设置单元格与单元格边框之间的空白间距	像素值（默认为2像素）
cellpadding	设置单元格内容与单元格边框之间的空白间距	像素值（默认为1像素）
width	设置表格的宽度	像素值
aline	设置表格在网页中的水平对齐方式	left、center、right
rowspan	数字	跨行合并单元格
colspan	数字	跨列合并但管个

表单标签

类别	属性	属性值	描述
input	type	text	单行文本输入框
		password	密码输入框
		radio	单选按钮
		checkbox	复选框
		button	普通按钮
		submit	提交按钮
		image	图像形式的提交按钮
		file	文件
	name	由用户自定义	控件的名称
	value	由用户自定义	input控件中的默认文本值
	size	正整数	input控件在页面中的显示宽度
	checked	checked	定义选择控件默认被选中的项
	maxlength	正整数	控件允许输入的最多字符数
label	-	-	label 标签为 input 元素定义标注（标签）。用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点
textarea
select			下拉菜单，至少包含一对`<option></option>`; 在option中定义`selected="selected“`时，当前项即为默认选中项
form	action	url地址
	method	Get/post
	name		用于指定表单的名称，以区分同一个页面中的多个表单。

//label

<form>

  <label for="male"</label>

  <input id="male" />

</form>

//文本域

<textarea cols="每行字符数" rows="行数"></textarea>

//下拉菜单

<select>

  <option>选项1</option>

  <option>选项2</option>

  <option>选项3</option>

  ...

</select>

路径

类别	描述
相对路径	以网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对路径。
绝对路径	绝对路径以Web站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的

图像文件和HTML文件位于同一文件夹：<img src="logo.gif"/>
图像文件位于HTML文件的下一级文件夹：<img src="img/img01/logo.gif" />
图像文件位于HTML文件的上一级文件夹：<img src="../logo.gif" />
D:\web\img\logo.gif
http://www.itcast.cn/images/logo.gif

Htmlcss学习笔记1——html基础的更多相关文章

js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
Java学习笔记：语言基础
Java学习笔记:语言基础 2014-1-31 最近开始学习Java,目的倒不在于想深入的掌握Java开发,而是想了解Java的基本语法,可以阅读Java源代码,从而拓展一些知识面.同时为学习An ...
卷积神经网络(CNN)学习笔记1：基础入门
卷积神经网络(CNN)学习笔记1:基础入门 Posted on 2016-03-01 | In Machine Learning | 9 Comments | 14935 Vie ...
「学习笔记」字符串基础：Hash，KMP与Trie
「学习笔记」字符串基础:Hash,KMP与Trie 点击查看目录目录「学习笔记」字符串基础:Hash,KMP与Trie Hash 算法代码 KMP 算法前置知识:\(\text{Border} ...
【学习笔记】Linux基础（零）：预备知识
学习笔记(连载)之Linux系列 Note:本学习笔记源自<鸟哥的Linux私房菜(基础学习篇)>一书,为此书重要内容的摘要和总结,对于一些常识性的知识不再归纳新型冠状病毒引发的肺炎战& ...
【JAVAWEB学习笔记】06_jQuery基础
接05的学习笔记. 四.使用JQ完成省市二级联动 1.需求分析使用jquery完成省市二级联动 2.技术分析 2.1数组的遍历操作方式一: $(function(){ // 全选/ 全不选 $(& ...
ios开发学习笔记001-C语言基础知识
先来学习一下C语言基础知识,总结如下: 在xcode下编写代码. 1.编写代码 2.编译:cc –c 文件名.c 编译成功会生成一个 .o的目标文件 3.链接:把目标文件.o和系统自带的库合并在一起, ...
HTML学习笔记之标签基础
目录 1.基本标签 2.链接 3.图像 4.表格 5.列表 6.块与布局 1.基本标签 (1)标题与段落标签 <h1> ~ <h6> 分别用于定义一至六级标题,标签 < ...
Java学习笔记之—Java基础
将学习到的JAVA基础用xmind记录了下来,需要原件的可以私信

随机推荐

CF EC 86 E Placing Rooks 组合数学
LINK:Placing Rooks 丢人现场.jpg 没看到题目中的条件放n个rook 我以为可以无限放自闭了好半天. 其实只用放n个.那么就容易很多了. 可以发现不管怎么放所有列/所有行 ...
C#与网络相关的两个监听的事件
今天遇到一个问题,当网络连接有问题的时候设计软件向用户发送通知,查了资料发现了两个相关的事件分享一下. 一.System.Net.NetworkInformation命名空间下的NetworkChan ...
面试题：JVM 堆内存溢出后，其他线程是否可继续工作？
来源:http://sina.lt/gqaM 最近网上出现一个美团面试题:“一个线程OOM后,其他线程还能运行吗?”.我看网上出现了很多不靠谱的答案.这道题其实很有难度,涉及的知识点有jvm内存分配. ...
synchronized 锁的原理
synchronized 的基本认识在多线程并发编程中 synchronized 一直是元老级角色,很多人都会称呼它为重量级锁.但是,随着 Java SE 1.6 对 synchronized 进 ...
001_HyperLedger Fabric环境安装
HyperLedger Fabric的环境,有解决三大问题第一,是系统环境,这里我们选择的是centos7 第二,是开发环境,这里我们选择的是Go语言第三,是运行环境,这里我们选择的是Docker ...
c++萌新到大牛，要看哪些书？
基础语法 <c++primer> 语法进阶 <c++primer plus> 专为c++编著.支持c++14国际标准. 数据结构和算法 <大话数据结构> 编程规范 ...
java 接口二
一接口的多实现接口最重要的体现:解决多继承的弊端.将多继承这种机制在java中通过多实现完成了. interface Fu1 { void show1(); } interface Fu2 { v ...
2020-06-27：ACID是什么？描述一下？
福哥答案2020-06-27: 福哥口诀法:事原一隔持(事务属性ACID:原子性.一致性.隔离性.持久性) 用银行数据库来举例子解释一下这四个特性原子性: 一个事务可能会包含多种操作,比如转账操作包 ...
Vuex mapState的基本使用
mapState把Store中的state映射到组件中的计算属性 Store文件 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) ...
ECharts 常见的问题总结
以前也用过ECharts(不得不说,这真的是百度的良心产品),但是都是一些简单的示例.这次因为工作的需要,做了很多表格,对ECharts有了更加深刻的理解,现在来总结一下. 第一个肯定是新手经常遇到的 ...

Htmlcss学习笔记1——html基础

开发工具

浏览器内核

html骨架

html标签分类

html标签

特殊

排版标签

文本格式化标签

图像标签img

链接标签a

特殊字符标签

列表标签

表格标签

表单标签

路径

Htmlcss学习笔记1——html基础的更多相关文章

随机推荐

热门专题