HTML

HTML概述

HTML(HyperText MarkUp Language)

"超文本标记语言",以标签的形式规定网页结构,它是制作网页的标准语言

HTML不区分大小写

标签、元素与属性

1.由尖括号包围,比如<pre><title></pre>

2.通常是成对出现的,也可以单独出现。

标签要有正确的嵌套,如:

<pre><html><bodt></body><html></pre>

标签加上标签里的内容就变成了元素。如:

<title>hello,world</title>就是一个元素。

被嵌套的元素称为嵌套元素的子元素,反之可以说是父元素,同级元素是兄弟元素,如:

\  外层:父元素
   \ 内层:子元素
   \     同级:兄弟元素
   \ 内层:子元素
   \
\

这些关系可以用一个树来表示,我们称为:HTML DOM树(Document Object Model)(文档对象模型)

标签中可以带有一些属性来描述这个标签,属性的顺序无关。

HTML的文件结构

第一行会有一个<!DOCTYPE html>表示文档类型符合html5标准

最外层有一堆html标签,表示文件的开始和结束,它的lang属性代表其是中文网页还是英文网页,提供给搜索引擎,内部第一个部分比较重要的一堆head标签,它表示的就是文件的头部信息,这是网页对浏览器和搜索引擎提供的信息。

内层标签body表示网页的主题内容,网页的主题内容会呈现在浏览器的主体部分。

\
\
\
   \
   \Document
\
\
\
\

HTML编辑器

记事本

Adobe DW

Sublime Text3

webstorm

html标签

html:代表文件的开始和结束,它的属性有lang,表示其为什么类型的网页。

meta:meta表示文件的元数据,具体可见博客HTML meta标签总结与属性使用介绍

注意,meta的字符集属性必须与文件的保存字符集属性相同。

h1~h6:标题标签,标题级数越大,字体大小越小,通常一个网页只有一个h1。

p:段落标签,每个段落自动换行,段落内部文字忽略连续空格(可以用&nbsp),也不会显示空行,且不会换行

br:段内换行,记得加斜杠。

pre:预留格式标签,文本中的空格和换行符会被保留,适合显示计算机代码。

span:组合行内元素,以便通过CSS样式来格式化。

hr:水平线标签,添加水平线。

!-- --:注释标签。

a:超链接标签,用于链接其他网页,href属性用于说明链接网址,需要说明协议名字(如:http://),也可以使用虚拟超链接,用#表示。

img:插入图像标签,src属性:文件路径+文件名,表示图片的地址,alt属性表示图片无法显示时显示的文本。

div:区域标签,属性:id(CSS中用),align:对齐方式。

ul:无序列表

ol:有序列表

li:列表项

table:表格标签,属性border表示表格的宽度

tr:表示table row,即表格的行。

td:表示表格的列。

th:把表格元素加粗显示。

form:表单标签,action属性与后端相关。

input:文本输入框/按钮,type属性,代表文本框类型,如text,password。name属性供给后端,如果type为submit、reset、radio和checkbox会有value属性,checked属性规定该选项是否已被选择。对了一组单选框name属性一定要一致啊。

select:下拉列表框标签。

option:选项标签,selected属性表示默认的选项。

textarea:文本区标签,属性cols代表列,rows代表行。

相关博客

HTML标签----图文详解

MOOC web前端开发笔记(二)的更多相关文章

  1. MOOC web前端开发笔记(一)

    网站和网页 网站 互联网上用于展示特定内容的相关网页的集合. 网页 网站中的一页,一个网站中的网页通过"超链接"的方式被组织在一起. 主页 进入网站看到的第一个网页,主页的文件名通 ...

  2. web前端开发笔记(2)

    一.什么是作用域. 所有变量都存在于一个执行环境中(也称作用域),这个执行环境决定了变量的生命周期,以及哪一部分代码可以访问其中的变量.总结: 执行环境有全局执行环境和函数执行环境. 每次进入一个新执 ...

  3. web前端开发笔记(1)

     一.HTML标签书写有哪些规范? 页面编码. 文档声明. 关键字与描述. 行内元素不能包含块级元素. a标签不能嵌套a标签. 标签名和属性必须用小写字母书写,属性必须加引号,标签必须闭合,单标签页必 ...

  4. 《编写高质量代码--Web前端开发修炼之道》读书笔记

    前言 这两周参加公司的新项目,采用封闭式开发(项目成员在会议室里开发),晚上加班到很晚,所以没时间和精力写原创博客了,今天就分享下这篇<编写高质量代码--Web前端开发修炼之道>读书笔记吧 ...

  5. Web 前端开发精华文章推荐(jQuery、HTML5、CSS3)【系列十二】

    2012年12月12日,[<Web 前端开发人员和设计师必读文章>系列十二]和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HT ...

  6. web前端开发最佳实践笔记

    一.文章开篇 由于最近也比较忙,一方面是忙着公司的事情,另外一方面也是忙着看书和学习,所以没有时间来和大家一起分享知识,现在好了,终于回归博客园的大家庭了,今天我打算来分享一下关于<web前端开 ...

  7. Web 前端开发人员和设计师必读文章推荐【系列二十八】

    <Web 前端开发精华文章推荐>2014年第7期(总第28期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...

  8. Web 前端开发人员和设计师必读精华文章【系列二十六】

    <Web 前端开发精华文章推荐>2014年第5期(总第26期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...

  9. Web 前端开发精华文章推荐(HTML5、CSS3、jQuery)【系列二十三】

    <Web 前端开发精华文章推荐>2014年第2期(总第23期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...

随机推荐

  1. 洛谷P1353 USACO 跑步 Running

    题目 一道入门的dp,首先要先看懂题目要求. 容易得出状态\(dp[i][j]\)定义为i时间疲劳度为j所得到的最大距离 有两个坑点,首先疲劳到0仍然可以继续疲劳. 有第一个方程: \(dp[i][0 ...

  2. Hash算法解决冲突的四种方法

    Hash算法解决冲突的方法一般有以下几种常用的解决方法 1, 开放定址法: 所谓的开放定址法就是一旦发生了冲突,就去寻找下一个空的散列地址,只要散列表足够大,空的散列地址总能找到,并将记录存入 公式为 ...

  3. static final与final修饰的常量有什么不同

    最近重头开始看基础的书,对一些基础的概念又有了一些新的理解,特此记录一下 static final修饰的常量: 静态常量(static修饰的全部为静态的),编译器常量,编译时就确定其值(java代码经 ...

  4. 帝国cms更换Ueditor编辑器上传图片加水印

    Ueditor安装包,里面有个/php/文件夹,找到Uploader.class.php,这是通用上传类文件找到private function upFile(),这是上传文件的主处理方法,找到122 ...

  5. Linux安装问题解决

    首先安装VM,之后下载centos7.5 安装好vm后运行时无法执行操作 提示 已将该虚拟机配置为使用 64 位客户机操作系统.但是,无法执行 64 位操作. 此主机支持 Intel VT-x,但 I ...

  6. Swift编程语言中如何实现自定义类型的for-in循环(基于Swift 2.2)

    我们在Swift编程语言中常常会用到for-in循环(在编程语言术语中又被称为for-each).此外,从Swift 2.2版本起,for循环将只支持for-in形式,而不支持for i = 0; i ...

  7. excel打开csv 出现乱码

    现在做舆情分析的相关项目,在数据处理的时候,发现了一个问题.将数据写入到csv文件,用excel打开(默认)就会出现乱码,如果将数据写入到.xlsx文件就不会出现乱码,因为csv是通用格式,所以我猜想 ...

  8. asp.net core mvc 读取appsettings.config中文乱码问题

    asp.net core mvc 读取appsettings.config中文乱码问题的解决方法如下: 用记事本打开appsettings.config,另存为的时候,编码设置为 “UTF-8”,

  9. keepalived双主虚拟路由配置

    我使用了两台虚拟机做测试 系统centos7.3 主机A:172.16.1.123 主机B:172.16.1.124 其实和普通配置keepalived差不多,就是复制多了一个vrrp_instanc ...

  10. jenkins:新增节点是启动方式没有Launch agent by connecting it to the master

    默认在这里的配置是禁用 所以启动方式只有两种,缺少Launch agent by connecting it to the master