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记录了下来,需要原件的可以私信

随机推荐

6.3 省选模拟赛 Decompose 动态dp 树链剖分 set
LINK:Decompose 看起来很难实际上也很难考验选手的dp 树链剖分矩阵乘法的能力. 容易列出dp方程暴力dp 期望得分28. 对于链的情况容易发现dp方程可以转矩阵乘法然后利用线 ...
js数组常用api
数组创建第一种,使用 Array 构造函数: var arr1 = new Array(); //创建一个空数组 var arr2 = new Array(10); // 创建一个包含10项的数组 ...
Java中15种锁的介绍
作者:搜云库技术团队原文:https://segmentfault.com/a/1190000017766364 1. Java 中15种锁的介绍在读很多并发文章中,会提及各种各样锁如公平锁,乐观 ...
Spring的事务抽象
Spring提供了一致的事务管理抽象,该抽象能实现为不同的事务API提供一致的编程模型.无视我们使用jdbc.hibernate.mybatis哪种方式来操作数据,无视事务是jta事务还是jdbc事务 ...
一个Python爬虫工程师学习养成记
大数据的时代,网络爬虫已经成为了获取数据的一个重要手段. 但要学习好爬虫并没有那么简单.首先知识点和方向实在是太多了,它关系到了计算机网络.编程基础.前端开发.后端开发.App 开发与逆向.网络安全. ...
Python爬虫获取百度贴吧图片
#!/usr/bin/python# -*- coding: UTF-8 -*-import urllibimport re文章来源:https://www.cnblogs.com/Axi8/p/57 ...
JVM初探（三）：类加载机制
一.概述我们知道java代码会被编译为.class文件,这里class文件中的类信息最终还是需要jvm加载以后才能使用. 事实上,虚拟机把描述类的数据从Class文件加载到内存,并对数据进行校验,转 ...
JavaScript call的示例
作用: 改变函数执行时的作用域 let name = 'global name' function say(){ console.info(arguments) // 调用时接收的参数个数 conso ...
git日常使用的常用命令总结
git日常使用的常用命令总结 git 是什么? Git是目前世界上最先进的分布式版本控制系统(没有之一). Git(读音为/gɪt/.)是一个开源的分布式版本控制系统,可以有效.高速的处理从很小到非常 ...
Spring - RestTemplate执行原理分析
什么是RestTemplate Synchronous client to perform HTTP requests, exposing a simple, template method API ...

Htmlcss学习笔记1——html基础

开发工具

浏览器内核

html骨架

html标签分类

html标签

特殊

排版标签

文本格式化标签

图像标签img

链接标签a

特殊字符标签

列表标签

表格标签

表单标签

路径

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

随机推荐

热门专题