1. 程式人生 > >老師叫我們寫的,他說這個對以後工作有好處

老師叫我們寫的,他說這個對以後工作有好處

required method 表單 獨立 隱藏 導航 row 網址 logs

1.編寫html步驟
第一步:新建一個記事本.(以.html結尾)
第二步:右擊選擇打開方式為文本文檔
第三步:編寫內容
<html>
<head></head>
<body>
hello html!
</body>
</html>
第四步:用瀏覽器打開查看內容.
2.HTML的基本結構
<html>
<head></head> <!-- 網頁頭部-->
<body></body> <!-- 網頁的主體-->
</html>
3.HTML的打開方式
第一種:用瀏覽器打開(瀏覽方式)
第二種:用文本編輯器打開(編輯方式)

補充:
HTML全稱 Hyper Text Markup Language(超文本標記語言)

4.標題標簽
<title></title> //標題
5.meta標簽
<meta charset="utf-8"/> //設置網頁的字符編碼
<meta name="keywords" content="內容"/>//關鍵詞
<meta name="description" content="內容"/>//網頁描述
6.h標簽
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
註意:h標簽只有h1到h6,並且h1最大,依次減小.

慕客網(技術學習)

7.段落標簽
<p></p>
8.換行標簽
<br/>
9.水平線標簽
<hr/>
10.字體樣式標簽
<strong></strong>//加粗
<em></em> //斜體
11.特殊符號
&nbsp; //空格
&gt; //大於符號(>)
&lt; //小於符號(<)
&quot;// 雙引號(")
&copy;//版權符號
註釋: <!-- 被註釋的內容 -->
用途: 第一種:解釋代碼.
第二種: 當前代碼現在用不到,可能以後用得到.

12.圖片標簽
<img src="圖片地址"
alt="當圖片找不到時提示的文字"
title="當鼠標放圖片上面時顯示的文字"
widht="圖片寬度"

height="圖片的高度"/>技術分享


13.a標簽(超鏈接)
<a href="跳轉的路徑" target="目標窗口"><a/>
註意:target的常用值:_self(表示當前窗口)
_blank(表示新窗口)
1)錨鏈接的使用步驟
第一步:定義錨點
<a name="名字">錨點</a>
第二步:定義鏈接
<a href="#錨點名">鏈接</a>
註意:#可以看出當前頁面
錨點名:表示要跳轉到指定的錨點位置.
(就是定義錨點時,name屬性的值.)
2)功能性鏈接
例:<a href="mailto:郵箱地址"></a>

第二章
1.列表
1.1 有序列表
<ol>
<li>內容</li> //列表項
</ol>
1.2 無序列表
<ul>
<li>內容</li>
</ul>
1.3 定義列表
<dl>
<dt></dt> //聲明列表項
<dd></dd> //列表項
</dl> 技術分享


註意:li獨占一行
2.表格
<table> //表格
<tr> //行
<td colspan="" rowspan=""></td> //單元格
</tr>
</tabel>技術分享


註意: colspan: 表示本單元格所占列數
rowspan: 表示本單元格所占的行數
3.視頻
<video src="視頻路徑" controls></video>
推薦使用:(能夠兼容更多的瀏覽器)
<video controls>
<source src="xx.mp4" type="video/mp4"/>
<source src="xxx.webm" type="video/webm"/>
</video>
4.音頻
<audio src="音頻路徑" controls></audio>
推薦使用:(能夠兼容更多瀏覽器)
<audio controls>
<source src="xx.mp3" type="audio/mp3"/>
<source src="xxx.ogg" type="audio/ogg"/>
<audio>
註意:a.視頻和音頻標簽都存在瀏覽器的兼容問題,使用的時候,盡量
使用推薦的方式.
b.controls表示顯示播放控制(如:開始,暫停等).還有其他的
類似屬性參考其他資料.

5.結構化元素
<header> //表示網頁的頭部
<footer> //表示網頁的尾部
<section> //表示網頁的獨立區域
<article> //表示文章
<aside> //表示相關內容或應用(側邊欄)
<nav> //導航

6.網頁結構
<header></header> //頭部
<section></section> //主體
<footer></footer> // 尾部

7.iframe內聯框架
語法: <iframe src="頁面地址" name=""/>
實現內聯:
第一步: 定義iframe
<iframe src="" name="mn"/>
第二步: 定義超鏈接並指定超鏈接內容要放置的地方(由target指定).
<a href="" target ="mn">xx</a>
第一:實驗本寫兩個(第一章,第三個練習)
(第二章, 練習4.視頻播放)
第二:檢查博客.(前面的內容放進去)

第三章 表單
1.語法
<form method="get|post" action="數據向哪提交的地址">
//表單內容
</form>

2.input 標簽常用屬性
<input name="標簽名" type="標簽類型" value="標簽默認值"/>
size:輸入文本框的字符的長度
maxlength:文本框的寬度
checked: 單選框和復選框的默認選中.
selected: 下拉框的默認選中

3.常用標簽
text //文本框
password //密碼框
radio //單選按鈕
checkbox //復選框
button //按鈕
submit //提交按鈕
reset //重置按鈕
url //只能輸入網址
emial //只能輸入郵箱
number //只能輸入數字
file //文件域
range //滑塊
search //搜索框
其他標簽
<select> :下拉框
<option></option> 選項
</select>
<textarea></textarea> 文本域
註意: radio和checkbox中的name屬性值需要保持一致,才能
到達單選或者多項的作用.

4.表單的高級應用
hidden //隱藏域
readonly // 只讀
disabled // 禁用

5.表單元素的標註
例:
<label for="id值"> 男</label>
<input type="radio" id="id值"/>
6.表單初級驗證的方法
placeholder //提示
required //必填項
pattern //正則表達式(輸入的內容必須符合這個表達式的要求)

老師叫我們寫的,他說這個對以後工作有好處