学习使我快乐 第十一天
Day 011
前段三大技術
HTML：負責顯示頁面內容（文字、按鈕、輸入框等）
CSS：負責頁面的布局和樣式
JavaScript：負責實現對應功能
前端文件的后綴名：html、htm、shtml
html：現在最常用的前段文件后綴名。
htm：htm和html相等，從前DOS操作系統后綴名存在限制，長度<=3
shtml:內置了腳本命令的html文件
HTML簡介
HTML文件理解為一個html標簽，html標簽里面包含head標簽和body標簽
head標簽存放頁面部分配置項，body標簽顯示頁面內容
html 標簽分為雙標簽（一般標簽）、單標簽（自閉合標簽）
雙標簽：<標簽名 屬性1=屬性值1 屬性2=屬性值2 …></標簽名>
單標簽：<標簽名 屬性1=屬性值1 屬性2=屬性值2 …>或者
<標簽名 屬性1=屬性值1 屬性2=屬性值2 …/>
屬性=屬性值 ——>固定寫法，用于修改標簽的內容和樣式
標簽名 ——> 固定寫法，不同的標簽用于顯示不同的內容，用法是固定的
html語法和Markdown語法屬于同一類
!DOCTYPE html 聲明為 HTML5 文檔。
html 元素是 HTML 頁面的根元素。
head 元素包含了文檔的元（meta）數據，如 定義網頁編碼格式為 utf-8。
title 元素描述了文檔的標題
body 元素包含了可見的頁面內容
h1 元素定義一個大標題
p 元素定義一個段落
<!-- 聲明這是一個html5文件 --> <!DOCTYPE html> <html><head><!-- charset用于頁面指定編碼 --><meta charset="utf-8" /><!-- 頁面的標題 --><title></title></head><body></body> </html>一、文本標簽html
- HTML 元素以開始標簽起始
- HTML 元素以結束標簽終止
- 元素的內容是開始標簽與結束標簽之間的內容
- 某些 HTML 元素具有空內容（empty content）
- 空元素在開始標簽中進行關閉（以開始標簽的結束而結束）
- 大多數 HTML 元素可擁有屬性
1.標題標簽h1、h2…h6
a.標簽之間可以相互嵌套
<h1>我是一級標題</h1><h2>我是二級標題</h2><h3>我是三級標題</h3><h4>我是四級標題</h4><h5>我是五級標題</h5><h6>我是六級標題</h6>2.段落與換行
a. 段落標簽：p
b. 標題標簽和段落標簽會自動換行（一個標簽代表一行或者一段，寫下一個標簽的時候自動另起一行 。
c. 換行：br
d. 水平線標簽：hr
3.空格
a. html頁面敲任意個空格恒等于一個空格
b. html一個空格可以用下列兩種方式表示：  或者&emsp
c.  表示一個像素單位（px）的空格
d. &emsp表示一個漢字的寬度一個&emsp=16個 
4.文字的特殊表現方式
a.傾斜標簽：i，em。
b. 加租標簽：b，strong。
5.行內文本標簽：span
<span>我的京東</span> | <span>京東會員</span> | <span>登陸 注冊</span><h1><b><i>一級加粗傾斜標簽</i></b></h1><b><b> 雙層加租 </b></b>二、超鏈接和圖片
1.圖片標簽：img
- src:1.可以寫入鏈接2.可以寫本地圖片路徑
- alt：當圖片不顯示時，顯示文字
- title：鼠標放在圖標上面可以提示文字
- width、heihet：能夠修改圖片、標簽盒子等的顯示寬度和高度
2. 超鏈接標簽：a
href：
- 引入在線鏈接
- 引入本地文件(必須是html文件)
- 可以引入id選擇器
target：
- ._self：當前標簽頁跳轉（默認）
- _target:新的標簽頁跳轉
3. 用id選擇器頁面跳轉
- id屬性如何調用：使用#號調用id屬性
- 例：例如我在頂部設置一個一級標題并且寫入id 在底部設置id 選擇器，輸入頂部id進行跳轉。
- 使用此方法可以設置中部底部，與上同理。
三、列表和內聯框架
1.內聯框架
- iframe：內聯框架 。
- iframe：經常被用在登錄、注冊頁面 。
- 可用width 、 height 對其進行頁面大小的調整。
2.列表
- 列表：有序列表ol、無序列表 ul
- 列表中的內容放在 li
- 列表在網站中主要用來做下拉菜單和展示同一類內容
四、input標簽
1.input
- input：默認是一個文本框，但是通過修改type的屬性值可以將input構造成不同的形式
- placeholder：輸入框中的提示性文字
- maxlength：限制輸入內容的長度
- value：當input變為按鈕時，在按鈕上顯示文字
可改變類型
<input type="color"><input type="file"><input type="date"><input type="time"><br><input type="datetime-local">2.單選框
- radio：單選框。
- name：告訴系統，兩個單選框屬于同一類。
- 將單選框中的id屬性值設置為和lable標簽中的for 屬性值想同，表示相關聯。
3.多選框
- checkbox：復選框，可多選。
總結
以上是生活随笔為你收集整理的学习使我快乐 第十一天的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 京东商城欲实现2%利润率 B2C盈利在前
- 下一篇： Cortex-A7中断详解（一）