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

随机推荐

nodeJs + js 大文件分片上传
简单的文件上传一.准备文件上传的条件: 1.安装nodejs环境 2.安装vue环境 3.验证环境是否安装成功二.实现上传步骤 1.前端部分使用 vue-cli 脚手架,搭建一个 demo 版本, ...
029_go语言中的非阻塞通道
代码演示 package main import "fmt" func main() { messages := make(chan string) signals := make ...
Ubuntu定时执行任务（定时爬取数据）
cron是一个Linux下的后台进程,用来定期的执行一些任务.因为我用的是Ubuntu,所以这篇文章中的所有命令也只能保证在Ubuntu下有效. 1:编辑crontab文件,用来存放你要执行的命令 s ...
Netty之旅：你想要的NIO知识点，这里都有！
高清思维导图原件(xmind/pdf/jpg)可以关注公众号:一枝花算不算浪漫回复nio即可.(文末有二维码) 前言抱歉好久没更原创文章了,看了下上篇更新时间,已经拖更一个多月了. 这段时间也一直 ...
Linux文本处理详细教程
1. 文本处理本节将介绍Linux下使用Shell处理文本时最常用的工具: find.grep.xargs.sort.uniq.tr.cut.paste.wc.sed.awk: 提供的例子和参数都是 ...
比原Bapp红包应用
喜迎国庆期间,比原链在自己的移动端钱包Bycoin(下载地址)和google插件钱byone中推出了红包应用,在国庆期间深受大家好评. 那我们今天就来大概介绍一下比原红包,以及基于比原链开发dapp应 ...
linux常用命令（三）文件操作命令
Linux文件的目录结构根目录 / 家目录 /home 临时目录 /tmp 配置目录 /etc 用户程序目录 /usr 文件基本操作 ls 查看目录下的文件 touch 新建文件 mkdir 新建文 ...
简述python中`functools.wrapper()
简述python中functools.wrapper() 首先对于最简单的函数: def a(): pass if __name__ == '__main__': print(a.__name__) ...
oracle语法查某个字段为空
select * from t_address_express_mapping t where t.start_house_number is null;
Visual Studio自动编译gRPC工程的设置
前段时间研究一个java程序,增加一些功能.其中用到java和C#的通信.自然,有多种办法,后来实际上是用javascript调用C#的REST WCF服务实现的.但是在查资料的过程中,发现有个Pro ...

Htmlcss学习笔记1——html基础

开发工具

浏览器内核

html骨架

html标签分类

html标签

特殊

排版标签

文本格式化标签

图像标签img

链接标签a

特殊字符标签

列表标签

表格标签

表单标签

路径

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

随机推荐

热门专题