我爱编程

HTML(第一天)

2017-03-06  本文已影响0人  web小杨

1.了解本专业课程目标、就业方向

2.了解HTML相关概念(HTML、XHTML、HTML5)

3.常用编辑器及浏览器

4.HTML基础语法

5.站点的创建

6.HTML常用标记

7.项目应用

1.了解本专业课程目标、就业方向

*web标准分三方面:

*组织解析:

(1)W3C( World Wide Web Consortium )万维网联盟,创建于1994年是Web技术领域最具权威和影响力的国际中立性技术标准机构;是专门负责网络标准制定的非赢利组织。制定了结构标准和样式标准;

(2)ECMA:欧洲电脑网商联合会(厂商协会),制定了行为标准

2.了解HTML相关概念(HTML、XHTML、HTML5)

*html的发展史:

*HTML相关概念的介绍:

HTML:指的是超文本标记语言

XHTML:指的是可拓展超文本语言

HTML5:指的是HTML第五次重大修改

*HTML语言的特点:

简易性(HTML版本升级采用超集方式,从而更加灵活方便)

可扩展性(HTML采取子类元素的方式,为系统扩展带来保证)

平台无关性(HTML可以使用在广泛的平台上)

3.常用的浏览器和编辑器

浏览器:谷歌、火狐、IE。欧朋、safari

编辑器:DW(Dreamwaver)、webstorm、hbulider、sublime

*sublime text3常用快捷键

4.HTML基本结构和基础语法

*基本结构

<!DOCTYPE html>`````````````````````````````定义文档类型,此标签可告知浏览器文档使用哪种HTML或XHTML规范

<html>··············································<html></html>称为根标签,所有的网页标签都在<html></html>中

<head>··········································································································

<meta charset="utf-8">···················<head>标签用于定义文档的头部,它是所有头部元素的容器。头部元素有<title>、<script>、<style>、<link>、<meta>等标签。

<title>无标题文档</title>·················

</head>·········································································································

<body>·······································在<body>和</body>标签之间的内容是网页主要内容,如<h1>、<p>、<a>、<img>等网页内容标签,在这里的标签中的内容会在浏览器中显示出来。

</body>

</html>

*基本语法

1.常规标记

<标记  属性=“属性值”  属性=“属性值”>

2.空标记

<标记 属性=“属性值”  />

5.站点的创建

域名注册-租用空间-网站建设-推广-维护

6.HTML常用标记

*h1-h6各种级别文本标题标记

*<p>段落标记</p>

*&nbsp空格

*换行<br/>

*<b></b>加粗标记

*<strong></strong>加粗内容

*<em></em>倾斜标记

*<hr/>水平线

*<ul></ul>无序列表

*<ol></ol>有序列表

*<dl></dl>

*img 标签(为网页插入图片)

<img src="目标文件路径及全称" alt="图片替换文本" title="图片标题"/>

<a href="目标文件路径及全称">

*table常用标记:

width:表格宽度

height:表格高度

border:表格边框

bgcolor:表格的背景色

cellspacing:单元格与单元格之间的间距

cellpadding:单元格与内容之间的空隙

align:lift、center、right

文本框:<input type="text" value="默认值"/>

密码框:<input type="password"/>

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

提交按钮:<input type="submit" value="按钮内容"/>

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

单选框/单选按钮

<input type="radio" name="ral"/>

<input type="radio" name="ral"/>

<input type="radio" name="ral" checked="checked"/>

复选框

<input type="checkbox" name="like"/>

<input type="checkbox" name="like"disabled="disabled"/>

select标签(下拉列表框)

<select name="">

            <option value="1">选项一</option>

            <option value="2"> selected="selected"选项二</option>

</select>

textarea(文本域)

<textarea cols="字符宽度" rows="行数">在这里输入文字</textarea>

上一篇下一篇

猜你喜欢

热点阅读