HTML简介

1、html的基本概念

HTML:HyperTextMarket language,超文本标记语言(所谓“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。)是用来描述网页语言,html使用标记标签来描述网页,所以说html是一种标记语言,而不是编程语言。

-----html先知知识-----

在学习HTML之前最先应该了解的就是html环境的搭建,那么必须从编辑器和解析器等方面做一个深入的了解。现在为大部分开发者青睐的编程软件有sublime及visual studio code,当然现如今还有很多的集成开发软件如Dreamweaver等。
而主流的选择器内核及代表浏览器“Chrome、Safari、Firefox、Opera、IE(IEtest);Firefox是开源的Presto(迅速的)代表作品Opera,Prefox是由Opera Software开发的浏览器排版引擎。它也是世界上公认的渲染速度最快的引擎。Webkit Safari内核,Chrome内核原型,他是苹果公司自己的内核,也是苹果的Safari浏览器使用的内核Blink由Google和Opera Software开发的浏览器排版引擎。”


2、html文档的组成

完整的HTML文档是有多个HTML元素按照一定的方式组成的(此处为html5文档),如下图:

除了形式上较以前有所改变html5还增加了很多新的特性,比如:

  • 用于绘画的 canvas 元素
  • 用于媒介回放的 video 和 audio 元素
  • 对本地离线存储的更好的支持
  • 新的特殊内容元素,比如 article、footer、header、nav、section
  • 新的表单控件,比如 calendar、date、time、email、url、search

3、html元素组成

HTML元素分为单标签元素双标签元素属性,而元素的分类则有块级元素行内元素其他元素

1. 块级元素
独占一行空间,用来布局段落,列表,导航菜单,脚注等结构,不要将块级元素嵌套在行内元素中。

             <p>this is paragraph1</p>
<p>this is paragraph2</p>

2. 行内元素
与其他元素共享一行空间,一般被嵌套在块级元素中,通常作为段落的一部分出现

   <p>you are <strong>strong</strong></p>

3. 其他元素(空元素、替代元素等)
空元素:只包含单个标签,通常用于在文档中插入部分内容,例如img

<div><img src="my.jpg" alt=""></div>

替代元素:替代元素已经脱离了CSS的范畴,它们的表现不依赖CSS,典型的替换元素有<img>,<object>,<video>,<textare>,<input>,<audio>,<canvas>等。


刚起步阶段主要得学习html的标签使用方法,而在html5中有很多的标签。比如 p,h1,h2,h3,h4,h5,h6,ul,ol,dl,ul,img,a,table,form,div,span等

还有一些不常用标签(部分已被html5舍弃但书写并不出现错误)

  • abrr 缩略语
  • b不带任何强调意义的标记一段文字,加粗
  • strong 表示重要内容,加粗
  • em 表示着重强调一段文字,倾斜
  • i不带任何强调意义的标记一段文字,倾斜
  • cite 表示作品标题,将作品名倾斜
  • del 表示从文档中删除的文字
  • s表示文字已经不再准确,也是删除线
  • u不带强调意义的给一段文字加下划线
  • ins 表示加入文档的文字,也是下划线
  • small 表示小号字体
  • sub 表示下标文字
  • sup 表示上标文字
  • q表示引自其它的内容,被q标签修饰的自己加引号表示引用
  • pre 表示格式化一段文字,也可以用来引入一段代码
  • span css中使用的添加样式的模块
  • div会换行,span不会换行
  • <!-- -->注释

表格及表单

前期学习还有一个重要的知识点即是HTML中表格和表单的使用。

1)表格(Table)

  • table 声明一个表格属性:
    1.border 边框线宽度,默认为0
    2.width 宽度
    3.cellpadding 单元格内边距,文字与内边框的距离 如:cellpadding=10
    4.cellspacing 单元格间距 默认为1 - 列表项目
  • tr 行
    align(表格的排列方式/对齐方式):center、left(默认)、right
  • td 列
    1.width/height
    2.colspan 合并列,跨列向右跨
    3.rowspan 合并行,跨行向下跨
  • th 表头,会加粗,并且会居中
  • caption 表格的标题
  • 给表格划分区域(不常用)
    thead、tbody(必须写)、tfoot
  • 语义元素(不多用)
    1.h1~h6:表示标题
    2.header:表示头部
    3.nav:表示导航
    4.footer:表示尾部
    5.address:表示文档或article的联系信息
    6.aside:表示侧边栏
    7.section:表示主题区域
    8.article:表示一段独立的内容

2)表单(Form):作用是可以和服务器进行交互
一、Form中的属性:
1.action:定义一个URL,当点击提交按钮时,向这个URL发送数据
2.method(get/post):用于向action URL发送数据的HTTP方法。默认是get。

注:get和post区别:
1)get方式表单封装的数据直接显示在url上。post方式数据不显示在url上。
2)get方式安全级别较低,post级别较高。
3)get方式数据的长度,post支持大数据。•input 标签:定义输入字段,用户可在其中输入数据。

二、input 中 type属性:
1)type=text 文本框
2)type=password 密码
3)type=radio 单选按钮 name属性
4)type=checkbox 多选按钮
单选和多选都有默认值:checked="checked"
5)type=reset 重置按钮
6)type=submit 提交按钮
7)type=file 上传文件的输入项
8)type=button 按钮
9)type=image 图片(也是提交按钮,)
10)type=hidden 隐藏标签(用户不用看到的,但是咱们开发时必须要使用的,可以把数据封装到隐藏标签中,和表单一起提交到后台)

三、其他标签
1、选择:select /select>选择下拉框 option 表示内容 /option
2、文本域textarea
textarea 文本内容 /textareavalue属性:
a.对于按钮、重置按钮和确认按钮:定义按钮上的文本。
b.对于图像按钮:定义传递向某个脚本的此域的符号结果。
c.对于复选框和单选按钮:定义 input 元素被点击时的结果。
d.对于隐藏域、密码域以及文本域:定义元素的默认值。
注:不能与 type="file" 一同使用。与 type="checkbox" 和 type="radio" 一同使用时,此元素是必需的。•name属性:为 input 元素定义唯一的名称。

HTML5前期学习准备(一)的更多相关文章

  1. HTML5学堂 全新的HTML5/前端技术分享平台

    HTML5学堂 全新的HTML5/前端技术分享平台 HTML5学堂是做什么的? HTML5学堂~http://www.h5course.com~由多名热爱H5的讲师们组成的一个组织.致力于构建一个前端 ...

  2. html5 的百度地图连接

    在一些网站上,我们经常会看到一些地址会有一个图标的形式展现,当你点击的时候就会加载一个你点击区域的地图出来,很神奇的一个功能,在之前是没有这样功能的,都是直接写上地址,你要去的话自己找去吧,现在有了这 ...

  3. 谈谈HTML5中的history.pushSate方法,弥补ajax导致浏览器前进后退无效的问题

    移动端为了减少页面请求,有时候需要通过单页面做成多页面的效果,最近有这么个需求,表单填完后执行第一步,然后执行第二步,第二步执行完后再执行第三步,每一步都要保留之前的数据.这种情况用单页面实现再合适不 ...

  4. html5测试总结

    1.因为html5不兼容IE78,所以在PC上使用并非十分光.pc上IE还是占主流 2.html5主要用在移动终端 3.html5短期内因为自身的缺陷,用户体验无法达到原生app的体验.如:html5 ...

  5. 基于phonegap,html5,ratchet,handlebars等技术的微表情APP

    该app是由很多有意思的微表情构成的,支持40种表情,并且每种表情都有不同的状态,主要有搜索表情,分享表情,摇一摇换表情等功能.目前只支持安卓版.由前期构思,到技术选型,到界面设计,到编码测试,再到发 ...

  6. 初识 HTML5(一)

    H5其实就是H4的一个增强版本,我们在利用H5进行网页的构造会更简便,标签语义更简洁明了.首先,我们要理解HTML4,它是HTML的标记+css2+JavaScript的一些基本应用,简言之,就是AP ...

  7. 新手入门HTML5开发,你必须先搞懂这6个问题

    凭借着跨平台,实时更新,无需安装,易于分发等众多优点,HTML5受到越来越多企业的青睐.而凭借着入门相对简单的优势,很多人编程初学者都选择学习HTML5.但对于初学者来说,学习HTML5之前,会有很多 ...

  8. 刚接触HTML5应该先学哪里才好?

    好吧,话不多说,直接来点干货吧! 刚接触html的小白都感觉摸不着头脑?应该怎么学习呢,其实HTML5可能对于还没有接触过的小白来说会比较的难,听起来也比较新颖.这是个什么骚东西!其实不然,这个就是构 ...

  9. HTML5总结整理

    (仅供大家学习分享交流) 一.简介 1.前端开发最核心技术 我们知道,用所谓的网页三剑客已经不能满足需求了,那前端开发究竟要学习什么技术呢?网页最 主要由3部分组成:结构.表现和行为.网页现在新的标准 ...

随机推荐

  1. 绿洲作业第一周 - Y3每日中文学习任务清单

    尽量每天完成一首古诗. 如果孩子另有学习安排,可在周日(2.16)23:59前,完成任务.有兴趣.学有余力的孩子可以自我拓展其中的“寒假读诗”.

  2. screen小脚本

    # 创建screen,执行命令,最小化screen #!/usr/bin/env bash screen_name1=$"bdapi" # 检查screen是否存在,等于0.表示s ...

  3. LIS 问题

    #include<cstdio> #include<iostream> #include<algorithm> #include<queue> #inc ...

  4. 国内外主流的三维GIS软件

    我国GIS经过三十多年的发展,理论和技术日趋成熟,在传统二维GIS已不能满足应用需求的情况下,三维GIS应运而生,并成为GIS的重要发展方向之一.上世纪八十年代末以来,空间信息三维可视化技术成为业界研 ...

  5. ACG记录整理

    资料来源 日文维基百科 bangumi番组计划 中文维基百科 百度百科 豆瓣电影 资料类型 テレビアニメ‎ OVA‎ アニメ映画‎ Webアニメ‎ 内容说明 番名,带超链接介绍,尽量选用国内网站介绍, ...

  6. MySQL5.7.x安装教程(tar.gz)

    博主本人平和谦逊,热爱学习,读者阅读过程中发现错误的地方,请帮忙指出,感激不尽 二.MySQL安装(tar.gz)  1.系统环境设置 1.1清空系统mysql 安装mysql之前需要将系统自带的my ...

  7. django框架进阶-ModelForm组件-长期维护

    ############################################################ """ 通常在Django项目中,我们编写的大部 ...

  8. every|each|the用于姓氏的复数形式|comrades-in-arms|clothes are|word|steel|affect|effect

    ________ man in the crowd raised his hand.  A. All  B. Each  C. Every  D. Both 题目解析 考查代词的用法.此句意思是:人群 ...

  9. OSPF 大实验

    实验拓扑如图所示: 公司A网络如实验拓扑所示,请根据如下需求对网络进行部署: 1) 按照拓扑所示配置OSPF多区域,另外R3与R6,R4与R6间配置RIPv2.R1,R2,R3,R4的环回接口0通告入 ...

  10. OpenCV 改变图像的对比度和亮度

    #include <opencv2/core/core.hpp> #include <opencv2/highgui/highgui.hpp> #include <ios ...