HTML

  网站建站流程:
  

  WEB标准的概念及组成

(1)W3C( World Wide Web Consortium )万维网联盟,创建于1994年是Web技术领域最具权威和影响力的国际中立性技术标准机构。
W3C (制定了结构(xhtml、xml)和表现(css)的标准,非赢利性的。)
(2)ECMA(European Computer Manufactures Association) 欧洲电脑场商联合会。
ECMA制定了行为(DOM(文档对象模型),ECMAScript)标准

(3)WHATWG网页超文本应用技术工作小组是:

一个以推动网络HTML 5 标准为目的而成立的组织。在2004年,由Opera、Mozilla基金会和苹果这些浏览器厂商组成。

HTML及相关概念的介绍

HTML 指的是超文本标记语言 (Hyper Text Markup Language) www万维网的描述性语言。

XHTML指可扩展超文本标记语言(标识语言)(EXtensible HyperText Markup Language)是一种置标语言,表现方式与超文本标记语言(HTML)类似,不过语法上更加严格。

HTML5指的是HTML的第五次重大修改(第5个版本)(HTML5 是 W3C 与 WHATWG 合作的结果)

三、相关软件的应用以及站点的创建

1) 站点的作用
A/ 用来归纳一个网站上所有的网页、素材以及他们之间的联系
B/ 规划网站的所有内容和代码 整合资源
2)创建站点的步骤
创建网页所需各个文件夹 css、js、images
3)文件的命名规则
a/ 件命名规则:用英文,不用中文
b/ 名称全部用小写英文字母、数字、下划线的组合,其中不得包含汉字、空格和特殊字符;必须以英文字母开头。@#¥%……! -_
c/ 网站的首页必须命名为index.html不建议使用shouye.html

HTML基本结构

定义文档类型 分为四种:Strict(严格型)、Trasitional(过渡型 常用这种)、Frameset(框架型)、手机浏览器DTD mobile.

HTML的基本语法:

1、<常规标记>
<标记 属性=“属性值” 属性=“属性值”></标记>
例如:<head></head>

2.空标记
<标记 属性=“属性值” />
例如:<meta charset=”utf-8”> <br/>

说明:
1.写在<>中的第一个单词叫做标记,标签,元素。
2.标记和属性用空格隔开,属性和属性值用等号连接,属性值必须放在“”号内。
3.一个标记可以没有属性也可以有多个属性,属性和属性之间不分先后顺序。
4.空标记没有结束标签,用“/”代替。

HTML常用标记

1、文本标题(h1-h6)

<h1>LOGO</h1>
<h2>次要栏目或标题-小标题H2</h2>
<h3>再次要栏目或分类小标题H3</h3>
<h4>文中分类小标题H4</h4>
<h5>二级标题</h5>
<h6>六级标题</h6>html标题标签使用原则:H1在一个网页中最好只使用一次,如对一个网页LOGO使用。

2、段落文本(p)

<p>段落文本内容</p>
标识一个段落(段落与段落之间有段间距)

3、空格

&nbsp;
所占位置没有一个确定的值,这与当前字体字号都有关系.

4、换行(br)

<br />
换行是一个空标记(强制换行)

5、加粗 加粗有两个标记

A、<b>加粗内容</b>
B、<strong>加粗内容</strong>

6、倾斜

<em></em> ,<i></i>

7、水平线

<hr />空标记

8、列表(ul,ol,dl)

HTML中有三种列表分别是:无序列表,有序列表,自定义列表
*无序列表
无序列表组成:
<ul>(unordered list)
<li></li>
<li></li></ul>
*有序列表
有序列表组成:
<ol>(ordered list)
<li></li>
<li></li></ol>
*自定义列表
<dl>(definition list)
<dt>名词</dt>
<dd>解释</dd>
(definition description)

9、插入图片

<img src="目标文件路径及全称" alt="图片替换文本" title="图片标题" />
注:所要插入的图片必须放在站点下
title的作用: 在你鼠标悬停在该图片上时显示一个小提示,鼠标离开就没有了,HTML的绝大多数标签都支持title属性,title属性就是专门做提示信息的
alt的作用:alt属性是在你的图片因为某种原因不能加载时在页面显示的提示信息,它会直接输出在原本加载图片的地方。

10、超链接的应用

语法:
<a href="目标文件路径及全称/连接地址" title="提示文本">链接文本/图片</a>
<a href="#"></a>空链接
属性:target:页面打开方式,默认属性值_self。
属性值:_blank 新窗口打开
<a href="#" target="_blank">新页面打开</a>

11、div和span的用法

<div ></div>没有具体含义,统称为块标签,
用来设置文档区域,是文档布局常用对象<span> </span>
文本结点标签
可以是某一小段文本,或是某一个字。 

12、数据表格的作用及组成

作用:显示数据
表格组成
<table width="value" height="value" border="value" bgcolor="value" cellspacing="value" cellpadding="value">
<tr>
<td></td>
<td></td>
</tr>
</table>注:一个tr表示一行;一个td表示一列(一个单元格)
*数据表格的相关属性
1)width="表格的宽度"
2)height="表格的高度"
3)border="表格的边框"
4)bgcolor="表格的背景色" bg=background
5)bordercolor="表格的边框颜色"
6)cellspacing="单元格与单元格之间的间距"
7)cellpadding="单元格与内容之间的空隙"
8)对齐方式:align="left/center/right";
9)合并单元格属性:
colspan=“所要合并的单元格的列数"合并列;rowspan=“所要合并单元格的行数”合并行;

13、表单的作用及组成

1)、表单框

<form name="表单名称" method="post/get" action=""></form>

2)文本框

<input type="text" value="默认值"/>

3)密码框

<input type="password" />
<input type="password" placeholder="密码" />

4)重置按钮

<input type="reset" value="按钮内容" />

5)按钮

<input name="'" type="button" value=“按钮内容” />
<input name="'" type="submit" value=“按钮内容” />
<button></button>

转载于:https://www.cnblogs.com/4813html/p/10497750.html

初识前端——个人总结相关推荐

  1. 前端历程(一)------初识前端

    前言 ​ 刚刚接触前端这一概念和基础知识是大一下学期的时候,有一门课程叫做客户端技术.起初只是把它当做一门一般的非考试课对待,上课也不认真听,到最后结课让提交大作业时,也是因为巧合之下那学习选择了一门 ...

  2. 【前端修炼之路】第一话 · 初识前端领域

    写在前面 夏日炎炎,现在屋外的鸟儿叫的很欢,屋内刚刚组装完的主机风扇在轰轰作响,呜呜呜,怎么闻怎么看都不像是矿卡的显卡现在竟散发出阵阵甜味~哈哈哈哈开个玩笑,写个文章看个视频,这显卡的风扇应该都不带转 ...

  3. 初识前端搬砖神器--AVUE

    一.前言 最近在开发项目过程中使用到了框架AVUE,他是基于elementUI和VUE高度封装后的框架,其特点是省时.省力(避免大量的CV操作),刚开始可能有些许的不习惯,使用了几天熟悉后就会感受到快 ...

  4. web标准 浏览器介绍 开发工具介绍 HTML介绍 HTML颜色介绍 规范 HTML结构详解 {前端之前端初识}...

    前端之前端初识 前端初识 本节目录 一 web标准 二 浏览器介绍 三 开发工具介绍 四 HTML介绍 五 HTML颜色介绍 六 规范 七 HTML结构详解 一 web标准 web准备介绍: 1.w3 ...

  5. 前端组件化和模块化最大的区别是什么_7招提升你的前端开发效率

    前言 前端工程师其实是一个工作很杂的职位,除了要负责切图.写html/css/js外,还要解决一系列的浏览器兼容性.网页性能优化等问题,所以提高前端工程师的开发效率是势在必行的,也是前端工程化的体现. ...

  6. 从零学前端第一讲:前端开发是什么?给初学者有什么建议?

    这里是修真院前端小课堂,本篇分析的主题是 [从零学前端第一讲:前端开发是什么?给初学者有什么建议?] 初识前端 1.前端开发是什么? 2.前端开发有前途吗? 3.前端开发哪里学? 4.前端发展 5.对 ...

  7. 前端入门学习阶段(3)

    我们要讲什么 Iconfont 字体图标(阿里巴巴矢量字体图标库)原理以及实现 Media媒体响应式布局 Flex弹性盒子布局 移动端适配原理 rem(px.em.rem.%.vm) 课后作业 使用 ...

  8. 前端初级学习阶段(3)

    我们要讲什么 Iconfont 字体图标(阿里巴巴矢量字体图标库)原理以及实现 Media媒体响应式布局 Flex弹性盒子布局 移动端适配原理 rem(px.em.rem.%.vm) 课后作业 使用 ...

  9. web前端零基础系统学习路线,每个阶段都需要学什么?

    作为刚接触web前端开发或者已成为前端工程师的你,是否经常碰到以下疑问: 1.零基础从哪里开始学web前端? 2.学web前端要学习哪些语言? 3.学完web前端能做什么? 4.自学web前端学的会吗 ...

最新文章

  1. “人工智能”浪潮退去,“AI四小龙”怎么了?
  2. react中遇到的问题
  3. Magento多图导入
  4. 【简易教程】基于Vue-cli使用eslint指南
  5. C#的二进制序列化组件MessagePack介绍
  6. 82 个代码案例实践,带你学好 Python 机器学习
  7. python 代码格式规范脚本_Python编码规范
  8. 深入Java核心 Java内存分配原理精讲
  9. 仿minecraft游戏 linux,【图片】【Codea制作仿MineCraft3D游戏】Craft Ver. 0.1发布(开源)【codea吧】_百度贴吧...
  10. Tiny210 编译Linux3.0.8
  11. [Oracle] Data Pump 详细使用教程(5)- 命令交互模式
  12. User-Defined-Literal自定义字面量
  13. python模拟浏览器下载文件_python第一个脚本,模拟浏览器下载文件 | 学步园
  14. 纪念半个月的旷课生活~
  15. 计算机主机后面的usb哪个不可接入,电脑的USB接口不能使用了怎么回事?主板usb接口全部失灵的解决方法...
  16. OpenStack虚拟机rebuild和evacuate差异梳理
  17. 爱班级电脑端下载|二维码签到
  18. 2017北大数学夏令营第一天第二题的解答
  19. 1023 GPA计算
  20. POI java导出Excel设置自适应行高

热门文章

  1. linux无锁化编程
  2. 不同函数之间的跳转setjmp和longjmp
  3. 已解决:PC插上串口工具后PC端口com那里有个黄色叹号,无法使用串口工具
  4. 台湾积体电路制造公司(简称为台积电(TSMC))的28nm LP、HPM、HPC、HPC+四种不同处理器工艺版本的区别?
  5. int *ptr=(int *)(a+1)问题的探讨
  6. 用XFTP向Linux上传文件时出现Permission is not allowed
  7. 分享关于搭建高性能WEB服务器的一篇文章
  8. 零基础代理神器allproxy
  9. JavaScript类型·对象·函数
  10. Hadoop1.x之hdfs集群搭建