HTML隨堂筆記【狂神說JAVA】
課程地址：https://www.bilibili.com/video/BV1x4411V75C?p=1
演示代碼：https://pan.baidu.com/s/18ik8cTJT75_CVFuM-m12mQ
提取碼：apzm
HTML是什么？
HTML (Hyper Text Markup Language)超文本標記語言
超文本包括：文字，圖片，音頻，視頻，動畫等
HTML 5提供了一些新的元素和一些有趣的新特性，同時也建立了一些新的規則。這些元素、特性和規則的建立，提供了許多新的網頁功能，如使用網頁實現動態渲染圖形、圖表、圖像和動畫，以及不需要安裝任何插件直接使用網頁播放視頻等。
HTML的優勢
- 世界知名瀏覽器廠商對對HTML5的支持
- 市場的需求
- 跨平台
W3C標准
W3C
World Wide Web Consortium (萬維網聯盟)
成立與1994年，Web技術領域最具權威和影響力的國際中立性技術標准機構
W3C標准內容
- 結構化標准語言（HTML，XML)
- 表現標准語言(CSS)
- 行為標准語言（DOM,ECMAScript)
常見IDE
- 記事本
- DreamWeaver
- IDEA
- WebStorm
- ......
HTML基本結構
網頁基本信息
<!--DOCTYPE:告訴瀏覽器，我們要使用什么規范 -->
<!DOCTYPE html>
<html lang="en">
<!--head標簽代表網頁頭部-->
<head>
<!--meta 描述性標簽，它用來描述一些網站信息 -->
<!--meta一般用來做SEO -->
<meta charset="UTF-8">
<meta name="keywords" content="HTML筆記">
<meta name="description" content="一起學習，共同進步">
<!-- title是網頁標題 -->
<title>Title</title>
</head>
<!--body是網頁主體-->
<body>
Hello World!!
</body>
</html>
網頁基本標簽
-
標題標簽
h1,h2 ,h3,h4,h5,h6
-
段落標簽
<p>我是段落標簽</p> -
換行標簽
<br/> -
水平線標簽
<hr/> -
字體樣式標簽
加粗：
<strong>code is poetry</strong>斜體：
<em>code is poetry</em> -
注釋和特殊符號
注釋：
<!--注釋內容-->特殊符號
空格： 大於號：> 小於號:< 版權符號：©
圖形標簽
常見的圖像格式
- JPG
- GIF
- PNG
- BMP
- ......
使用
src:圖片地址（絕對地址/相對地址）（必填）
../一級目錄
alt :圖片加載失敗后顯示的文字（必填）
鏈接標簽
- 文本超鏈接
- 圖像超鏈接
使用
href：必填，表示要跳轉到的頁面地址
target:表示窗口在哪里打開
_blank:在新窗口中打開被鏈接文檔。
_self:默認。在相同的框架中打開被鏈接文檔。
_parent:在父框架集中打開被鏈接文檔。
_top:在整個窗口中打開被鏈接文檔。
framename:在指定的框架中打開被鏈接文檔。
超鏈接
- 頁面間鏈接
- 錨鏈接
- 標記位置
<a name="top">我是文章頂部</a> - 跳轉鏈接(可跨頁面跳轉)
<a href="#top">點擊跳轉至文章頂部</a>
- 標記位置
- 功能性鏈接
- 郵件鏈接：
<a href="mailto:an_shiguang@163.com">點擊聯系我</a> - QQ鏈接：https://shang.qq.com/v3/widget.html
行內元素和塊元素
塊元素
無論內容有多少，始終獨占一行顯示
p,h1~h6
行內元素
內容撐開元素，左右都是行內元素的可以排在一行
a,strong,em
列表
定義
列表就是信息資源的一種展示形式。它可以使信息結構化和條理化，並以列表的樣式顯示出來，以便瀏覽者能更快捷地獲得相應的信息
分類
-
有序列表
<ol> <li>java</li> <li>c++</li> <li>php</li> <li>python</li> </ol> -
無序列表
<ul> <li>java</li> <li>c++</li> <li>php</li> <li>python</li> </ul> -
自定義列表
<dl> <dt>語言</dt> <dd>java</dd> <dd>c++</dd> <dd>python</dd> <dd>php</dd> </dl>
表格
優點
- 簡單通用
- 結構簡單
基本結構
-
單元格
-
行
-
列
-
跨行
-
跨列
<table border="1px"> <tr> <td colspan="3">學生成績</td> </tr> <tr> <td rowspan="2">狂神</td> <td>語文</td> <td>100</td> </tr> <tr> <td>數學</td> <td>100</td> </tr> <tr> <td rowspan="2">秦疆</td> <td>語文</td> <td>100</td> </tr> <tr> <td>數學</td> <td>100</td> </tr> </table>
視頻和音頻
- 視頻元素 video
- 音頻元素 audio
src：資源路徑
controls:控制條
autoplay:自動播放
頁面結構分析
iframe內聯框架
src:地址
width:寬度
height：高度
name:框架標識名
表單
action:表單提交的位置，可以是網站，也可以是請求處理地址
method:有get和post兩種方式，提交方式
-
get提交方式
可以在url看到提交的信息，不安全，高效
-
post提交方式
比較安全，傳輸大文件
表單元素格式
增強鼠標可用性
<label for="mark">點我輸入</label>
<input type="text" id="mark">
表單簡單驗證
<!-- 郵箱驗證-->
<input type="email" name="email">
<!-- URL驗證-->
<input type="url" name="url">
<!-- 數字驗證 min為最小值 max為最大值 step為每次增加或減小的數值大小-->
<input type="number" min="20" max="1000" step="10">
<!-- 滑塊-->
<input type="range" name="voice" min="0" max="100" step="3">
<!--搜索框-->
<input type="search" name="search">
表單的應用
- 隱藏域
hidden - 只讀
readonly - 禁用
disabled
表單初級驗證
常見形式
placeholder:提示信息
required：非空判斷
pattern:正則表達式