Day035 網(wǎng)頁編程設計（HTML）
時間：2023-10-02 05:00:01 | 來源：網(wǎng)站運營
時間：2023-10-02 05:00:01 來源：網(wǎng)站運營
Day035 網(wǎng)頁編程設計（HTML）：
網(wǎng)頁編程設計（HTML）
? 目前軟件行業(yè)大多數(shù)的項目都是基于 B/S 架構(gòu)，即在瀏覽器端實現(xiàn)效果展示。網(wǎng)頁編程也是每個程序員必懂的技能。本階段課程主要講解 HTML5、CSS3 和 JavaScript 語言以及 Jquery。對于 JAVA 程序員來說，不需要像前端程序員那樣精通這部分內(nèi)容，但是需要做到熟悉。
第一節(jié)：互聯(lián)網(wǎng)的三大基石
1.1 概念
HTML(Hyper Text Markup Language)：超文本標記語言 HTTP(HyperText Transfer Protocol)：超文本傳輸協(xié)議 URL(Uniform Resource Location) ：統(tǒng)一資源定位符
1.2 理解示意圖
第二節(jié)：HTML 入門
2.1 為什么學習 HTML？
需求：（生活中遇到問題） 隨著技術(shù)的發(fā)展，信息量的增大網(wǎng)頁的數(shù)據(jù)信息沒有辦法完美的、漂亮的展現(xiàn)到用戶的面前。 意義(作用)： HTML是一種專門對網(wǎng)頁信息進行規(guī)范化展示的語言。把網(wǎng)頁的信息格式化展現(xiàn)的語言。
2.2 什么是 HTML？
HTML(Hyper Text Markup Language)：超文本標記語言 超文本：文本信息 、圖片、聲音、視頻、超鏈接等 標記：標簽的體現(xiàn)
2.3 學習的網(wǎng)站
w3cschool在線教程(網(wǎng)址：
http://www.w3school.com.cn/)
2.4HTML 的基本結(jié)構(gòu)
第三節(jié)：Head 標簽的子標簽
3.1 常用標簽
實例
實例 1 - 定義文檔關(guān)鍵詞，用于搜索引擎：實例 2 - 定義web頁面描述：實例 3 - 定義頁面作者：實例 4 - 每30秒刷新頁面：第四節(jié)：基本標簽 4.1 基本標簽 【新時代·幸福美麗新邊疆】浙江：代代接力守護綠色家園
【新時代·幸福美麗新邊疆】
【新時代·幸福美麗新邊疆】
【新時代·幸福美麗新邊疆】
【新時代·幸福美麗新邊疆】
【新時代·幸福美麗新邊疆】
【新時代·幸福美麗新邊疆】
新華網(wǎng)阿里5月11日電（張宸 雪珍）55歲 的白瑪加布看著在
瑪旁雍錯邊飛舞的海鷗和歡呼的游客，臉上露出了欣慰的笑 容。
新華網(wǎng)阿里5月11日電（張宸 雪珍）55歲的白瑪加布 看著在第五節(jié)：基本標簽 2 5.1 常用基本標簽
杭州尚學堂 杭州尚學堂 杭州尚學堂 杭州尚學堂 23 log7 杭州尚學堂 杭州尚學堂 杭州尚學堂 作用： 【1】樹形菜單 【2】導航欄的布局
- javaSE
- javaEE
- javaME
javajavaSEjavaEEjavaME
杭州尚學堂
第六節(jié)：超連接標簽 6.1 超鏈接標簽的作用 超鏈接標簽的作用（不會自動換行） 【1】實現(xiàn)不同頁面之間的跳轉(zhuǎn)
href:指定跳轉(zhuǎn)到目標資源的位置 target：打開網(wǎng)頁的方式 【2】實現(xiàn)錨點功能 6.2 超鏈接標簽的使用 02小標簽測試 杭州尚學堂 錨點功能 返回底部 返回頂部
第七節(jié)：圖片標簽 7.1 圖片標簽的注意 img (不會自動的換行) src:引入圖片的位置{相對路徑、絕對路徑、網(wǎng)絡路徑 } title：圖片的標題 原始 寬和高 400px 260px 200px 130px border:圖片的邊框 alt：圖片無法正常顯示的時候顯示的屬性 align:圖片的位置 ，必須有參照物 7.2 圖片標簽的使用
6666
https://zhuanlan.zhihu.com/write#https://zhuanlan.zhihu.com/write# 8888
第八節(jié)：表格標簽 8.1 表格標簽的注意事項 table>tr
3>th3 :聲明3行3列的表格 table表格的自適應能力 (align="center")整個的表格整 體居中 width="300px" height="300px"
cellpadding：內(nèi)容和單元格的距離
cellspacing：單元格和單元格的距離 tr：行 :height td/th：列 width td:普通的列 th:標題列:自動的居中，加黑效果 colspan:列合并 rowspan：行合并 bgcolor：背景顏色
第九節(jié)：表單標簽學習 1
https://www.baidu.com/s？鍵1=值1&鍵2=值2 action：表單提交的位置 method（get/post）：表單提交的方式 GET: (1)參數(shù)會依附于url地址之后 (2)利用get方式提交數(shù)據(jù)，數(shù)據(jù)的長度有限制 (3)利用get方式提交數(shù)據(jù)，是不安全的 Post (1)請求不會依附于地址， (2)利用post處理參數(shù)不受限制 （3）post提交數(shù)據(jù)比較安全
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>My Web</title> </head> <body> <form action="01HTML.html" method="post"> <input type="txt" name="wd"/> <input type="submit" value="百度一下" /> </form> </body></html>第十節(jié)：表單標簽學習 2
賬號： 密碼： 男： 女： 抽煙: 喝酒: 燙頭:
個人介紹： 你 好
中國 美國 日本 新加坡
第十一節(jié)：框架簽學習
1、iframe 框架學習：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <ul> <li><a href="http://www.baidu.com" target="ifm">百度</a></li> <li><a href="http://www.taobao.com" target="ifm">淘寶</a></li> <li><a href="http://www.jd.com" target="ifm">京東</a></li> </ul> <!--框架學習 width：寬度 height：高度 src:默認路徑 --> <iframe width="1000px" height="550px" name="ifm" src="http://www.baidu.com"></iframe> </body></html>2、frameset 框架學習
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <frameset rows="150px,*,100px"> <!--頂部部分--> <frame src="admin/top.html" noresize="noresize"/> <!--中間的部分--> <frameset cols="10%,*"> <!--左側(cè)部分--> <frame src="admin/left.html"/> <!--右側(cè)部分--> <frame src="admin/right.html" name="rig"/> </frameset> <!--底部部分--> <frame src="admin/bottom.html"/> </frameset> <!--<body> </body>--></html>第十三節(jié)：div 標簽學習
13.1div 標簽的注意事項 div本身是沒有任何的含義 div：作用就是把網(wǎng)頁進行模塊化的劃分 13.2div 標簽的使用
第十五節(jié)：H5 中增強表單標簽
郵箱: 年齡: 滑動器: 搜索: 日期: 日期: 日期: 顏色: 網(wǎng)址:
H5中表單增強的屬性 placeholder autofocus:自動的獲得焦點 max：最大值 min：最小值 minlength:最小長度 maxlength:最大長度
賬號: 密碼: 密碼:
第十六節(jié)、HTML5 中新增結(jié)構(gòu)標簽
16.1 博客地址
https://www.cnblogs.com/fly_dragon/archive/2012/05/ 25/2516142.html 16.2 標簽的使用
第十七、HTML5 中音頻視頻標簽
17.1 標簽的使用
改網(wǎng)頁不支持媒體標簽 改網(wǎng)頁不支持媒體標簽 改網(wǎng)頁不支持媒體標簽
第十八節(jié)、HTML5 中的繪圖標簽
18.1 標簽的使用
IT程序員請選擇
中國1
中國2
中國3
中國4
IBMIBM1IBM2IBM3 var ca=document.getElementById("mycat"); var te= ca.getContext("2d"); //背景顏色 te.fillStyle="#FF0000"; //繪制圖形的大小 te.fillRect(0,0,80,100);
在線咨詢
