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大特性解讀

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。