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基础的更多相关文章

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

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

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

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

  3. 卷积神经网络(CNN)学习笔记1：基础入门

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

  4. 「学习笔记」字符串基础：Hash，KMP与Trie

    「学习笔记」字符串基础:Hash,KMP与Trie 点击查看目录 目录 「学习笔记」字符串基础:Hash,KMP与Trie Hash 算法 代码 KMP 算法 前置知识:\(\text{Border} ...

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

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

  6. 【JAVAWEB学习笔记】06_jQuery基础

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

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

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

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

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

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

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

随机推荐

  1. Linux的VMWare中Centos7用户和用户管理三个系统文件(/etc/passwd-shadow-group解读)和批量创建用户user及用户工作环境path

    Linux 用户和用户组管理 用户工作环境PATH Linux系统是一个多用户多任务的分时操作系统,任何一个要使用系统资源的用户,都必须首先向系统管理员申请一个账号,然后以这个账号的身份进入系统. 用 ...

  2. LeetCode 164. Maximum Gap[翻译]

    164. Maximum Gap 164. 最大间隔 Given an unsorted array, find the maximum difference between the successi ...

  3. OpenCL Kernel设计优化

    使用Intel® FPGA SDK for OpenCL™ 离线编译器,不需要调整kernel代码便可以将其最佳的适应于固定的硬件设备,而是离线编译器会根据kernel的要求自适应调整硬件的结构. 通 ...

  4. MySQL面试题！新鲜出炉~

    01.Mysql 的存储引擎,myisam和innodb的区别? 答:1.MyISAM 是非事务的存储引擎,适合用于频繁查询的应用.表锁,不会出现死锁,适合小数据,小并发. 2.innodb是支持事务 ...

  5. python IF while逻辑判断语句

    if判断语句 if 1==1 and 2==2: pass else: print('error') if 1==1 or 2==2: pass else: print('error') while循 ...

  6. SpringCloud系列之服务容错保护Netflix Hystrix

    1. 什么是雪崩效应? 微服务环境,各服务之间是经常相互依赖的,如果某个不可用,很容易引起连锁效应,造成整个系统的不可用,这种现象称为服务雪崩效应. 如图,引用国外网站的图例:https://www. ...

  7. JavaScript中为什么需要!!？

    1. 布尔值为false的值 在JavaScript中,布尔值为 false的值有如下几个: undefined null false 0 NaN ""或''(空字符串) 2. ! ...

  8. Elasticsearch第四篇：索引别名、添加或修改映射规则

    项目中经常出现的问题,例如添加字段.修改字段,那原先的索引规则就要跟着改变,最好是一开始就给索引一个别名,修改字段时新增映射,然后将笔名指向新的映射,当然需要将之前的索引搬迁到新的映射当中. 1.获取 ...

  9. 从0写一个Golang日志处理包

    WHY 日志概述 日志几乎是每个实际的软件项目从开发到最后实际运行过程中都必不可少的东西.它对于查看代码运行流程,记录发生的事情等方面都是很重要的. 一个好的日志系统应当能准确地记录需要记录的信息,同 ...

  10. asp.net core跨平台--CentOS7.2部署asp.net core网站

    随着vs2015 2017的发布,.NETCore越来越流行了,我就尝试着做了个demo,在centos上试着运行了一下,中间遇到很多问题,不过最后还是成功运行,记录一下过程.废话不多说,直接开始: ...