HTML(WEB)开发day01

时间 2019-11-30

标签 html web 开发 day01 day 栏目 HTML 繁體版

原文原文链接

做者：gqkhtml

一：经常使用开发工具介绍：前端

　　　　SublimeText程序员

　　WebStormweb

　　　Dreamweaver　　　　　　AdobleEdge浏览器

　　1，Sublime Text 是一个代码编辑器（Sublime Text 2是收费软件，但能够无限期试用），也是HTML和散文先进的文本编辑器。Sublime Text是由程序员Jon Skinner于2008年1月份所开发出来，它最初被设计为一个具备丰富扩展功能的Vim。架构

　　2，WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。框架

　　3，Adobe Dreamweaver，简称“DW”，中文名称 "梦想编织者"，最初为美国MACROMEDIA公司开发^[1] ，2005年被Adobe公司收购。DW是集网页制做和管理网站于一身的所见即所得网页代码编辑器。利用对 HTML、CSS、JavaScript等内容的支持，设计师和程序员能够在几乎任何地方快速制做和进行网站建设。^[2] 编辑器

　　4，Adobe Edge是Adobe公司的一款新型网页互动工具。容许设计师经过HTML五、CSS和JavaScript制做网页动画。无需Flash，支持Android、iOS、webOS。^[1] 工具

二：网页包含元素学习

在XHTML标签元素中，大体可分为3类：

1. 块级元素：像h1~h六、p、div、ul、table等具备块的属性，可以独立存在且元素之间以换行分割，它们就属于块级元素(Block-level element)
2. 顶级元素：而像html、body以及框架等，是属于顶级元素，其表现相似块级元素，一样适用于框模型
3. 内联元素：指依附其余块级元素存在，紧接于被联元素之间显示而不换行。经常使用的内联元素包括img、span、li、br等

三：WEB标准：

　　。WEB标准不是某一个标准，而是一系列标准的集合，

　　。网页主要由三部分组成：

　　　　1，结构（Structure）：结构化标准语言主要包括XHTML和XML

　　　　2，表现（Presentation）：表现标准语言主要包括CSS

　　　　3，行为（Behavior）：行为标准主要包括对象模型（如W3C DOM）、ECMAScript等

　　。结构（HTML）能够看作是人的骨架，人的架构　　

。表现（CSS）化妆师进行化妆

　　。行为（行为动做）我能演大家能够吗

一：HTML学习

HTML 是用来描述网页的一种语言。

HTML 标签是由尖括号包围的关键词，好比 <html>
HTML 标签一般是成对出现的，好比 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

二：HTML骨架：

　　请假条格式：

同理：HTML也有本身的书写骨架格式(100年不会变)

<html>
　　<head>
　　　　<title></title>
　　</head>
　　<body>
　　</body>
</html>

<html></html>：html的跟标签，以html标签开始

<head><head>:头部信息

<title></title>：标题标签

<body><body>：将大多数基本内容存放在此标签里面　

三：HTML标签关系

1,双标签(夫妻不离不弃)

<标签名>内容</标签名> 

<body>内容</body>

2，单标签（我单身我骄傲）很是少

<标签名 />

<br />

3，嵌套关系

<head>
    <title></title>
</head>

4,并列关系

<head></head>
<body></body>

课堂练习：

一：Sublime初始　

经常使用的快捷键：

按 <html>或者“！” 或者 “html:5”,或者“html:xt” 按“tab”代码自动补全

二：字符集

<meta charset="UTF-8">

　　utf-8:是目前最经常使用的字符编码格式，经常使用的字符编码格式gbk和gb2312

　　gb2312简单中文包括6763个汉字

　　BIG5繁体中文，港澳台等用

　　GBK包含所有的中文字符，是GB2312的扩展

三：HTML经常使用标签

1，排版标签

标题标签（重点）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<h1>大侠坤哥学开发</h1>
	<h2>开发学院gqk</h2>
	<h3>新班坤哥讲台站</h3>
	<h4>颜值高来技术牛</h4>
	<h5>标题共有六级选</h5>
	<h6>具体效果刷新看</h6>
				------大侠坤哥
</body>
</html>

段落标签

<p>我是一个段落</p>

水平线标签

<hr />

　　做业案例：

素材：

40.6摄氏度：上海创出140年气象史上高温新纪录

2020年07月27日

10:58:26来源：新华网

新华网上海７月２６日电（记者李荣）２６日１３时３６分至４７分这一时间段，上海徐家汇气象观测站测得当日最高温达４０．６摄氏度。这是上海有气象记录以来１４０年的高温新纪录，打破了此前１９３４年创下的４０．２摄氏度的历史极值

上海已经连续２天发出了最高等级的红色高温警报。上海中心气象台首席服务官满莉萍说，今年副热带高压强度特别强，对上海及江南地区的控制“实在太稳定了”，整个７月份基本上都处在它的势力范围以内。２５日上海已出现了气象史上７月份“第四高”的高温值，这使得２６日的“基础”气温就很高，超过了３０摄氏度，而后不断地升温。此外，２６日白天风小，又吹的是西南风，特别是在中午以后这一个最易出现高温的时段，光照又比较强，因此气温“直线飙升”，一举冲破历史极值，出现了“创纪录”的极端酷暑天。

在上海历史上，出现４０摄氏度以上极端高温的概率并不大。根据相关资料，中心城区徐家汇观测站１４０年来仅出现了５次记录，除了这一次的新纪录，还有就是１９３４年７月１２日的４０．２摄氏度；１９３４年８月２５日、２００９年７月２０日、２０１０年８月１３日的４０摄氏度。

因为气温实在过高，上海２６日下午很多地区出现了热对流天气。气象台说，首先是浦东地区，下起了热雷雨。到１５时０５分，全市大部分地区出现了分散性的雷电活动和热雷雨，中心城区徐家汇等地都响起了隆隆的雷声。

在上海历史上，出现４０摄氏度以上极端高温的概率并不大。
根据相关资料，中心城区徐家汇观测站１４０年来仅出现了５次记录，除了这一次的新纪录，还有就是１９３４年７月１２日的４０．２摄氏度；１９３４年８月２５日、２００９年７月２０日、２０１０年８月１３日的４０摄氏度。

换行标签

<br />

　2,div span 标签（重点）

<div></div> <--块级-->
<span></span><--行内-->

　3，文字

　　4，图片标签（在浏览器中显示图片）

<img src="图片的路径" />

　　5，连接标签(经过连接进行跳转)

<a href="连接地址">点我</a>

　　6,锚点定位（经过建立锚点，迅速的定位到内容）

两步走
1，<a href="#id"></a>
2,要跳转的标签上面添加id属性
 <a href="test.html #next">第四集</a> <!-- 此种锚点定位是跳转至另一个页面的锚点 -->

　　7，base标签（设置页面中总体连接打开的方式）

<base target="_blank" />新窗口打开
<a href="#" target="_self">连接</a>当前窗口打开
默认为 当前的窗口打开
开发工具 默认提示 是href属性 要改为 target属性 才可使用

　　8，特殊字符表示

　　9，注释

路径问题：

相对路径（同一级，上一级，下一级）
绝对路径

无序列(ul列表中不建议使用其它标签，li下可使用)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>列表1</li>
        <li>列表1</li>
        <li>列表1</li>
        <li>列表1</li>
    </ul>
                 
</body>
</html>

有序列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <ol>
        <li>列表1</li>
        <li>列表1</li>
        <li>列表1</li>
        <li>列表1</li>
    </ol>
                 
</body>
</html>

自定义列表：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <dl>
        <dt>名词</dt>
        <dd>解释说明</dd>
        <dd>解释说明</dd>
        <dd>解释说明</dd>
        <dd>解释说明</dd>
    </dl>
                 
</body>
</html>

　　----------------------------------------------------------------------只要思想不滑坡，办法总比困难多

1. HtmlWeb类
2. Spring+MyBatis开发 day01
3. day01-UC-开发环境
4. 高并发day01
5. day01-项目概述、cms接口开发
6. Day01-Java开发环境搭建
7. day01.介绍python运维开发
8. 安卓开发日记Day01——HelloWorld
9. Day01-java开发环境及其配置
10. Day01 搭建Java开发环境
更多相关文章...
• Spring使用AspectJ开发AOP：基于XML和基于Annotation - Spring教程
• ionic 切换开关操作 - ionic 教程
• PHP开发工具
• JDK13 GA发布：5大特性解读