---
# System prepended metadata

title: html 1/18 概念
tags: [html]

---

# html 1/18 概念
###### tags: `html`

https://medium.com/%E7%8B%97%E5%A5%B4%E5%B7%A5%E7%A8%8B%E5%B8%AB/7-%E5%80%8B%E4%BD%A0%E5%BF%85%E9%A0%88%E7%9F%A5%E9%81%93%E7%9A%84semantic-elements-ccc8bbad5d
![](https://i.imgur.com/JtDL2x7.png)
![](https://i.imgur.com/FvHJcxY.png)
音樂圖片使用者開發功能通通擺web server
包含(name)
# 13-1 HTML5新元素
section=區段
header=頁首
footer=頁尾
article網頁主要
aside次要
nav導覽
figure圖片相片程式碼
除了figure通通沒有預設樣式，要用css來設定
# 13-2 Structural Semantic Elements
![](https://i.imgur.com/EdbwPcK.png)
每一頁都要長一樣=版型
用`<table>`去做
`<frameset>`框架式頁面=5個html 容易發生錯誤 
`<div>`=block元素可裝inline或所有元素
可根據需求做出想要的樣式 每個區塊都是div
缺點:(每個div 都要用不同的命名 瀏覽器指認div不認內容 效率差 由上而下慢慢查)
# 13-3 針對不支援這些元素的瀏覽器
![](https://i.imgur.com/Ghi6Zhp.png)
![](https://i.imgur.com/BnqqsZP.png)
figure裡面的img圖片大小300
figcaption就需要設定為300
img大小=figcaption大小
# 14-1 Input type屬性的新類型
![](https://i.imgur.com/Dz5HGBx.png)
日期時間=(date日期,datetime-local本地日期時間,local=本地時間,month月,time時,week週)
![](https://i.imgur.com/aG1wx61.png)
文字方塊=(email信箱,url(收尋)網址,tel電話,search新的輸入文字方塊類型x=del)
URL必須完整網址or http://
color顏色
range數值型執行輸入(粗略)
number精準數值(精確)
![](https://i.imgur.com/CvQWYPN.png)
# 14-2 表單驗證類型的屬性
![](https://i.imgur.com/xYezb7k.png)
範圍驗證屬性(min最小,max最大,step属性规定输入字段的合法数字间隔)
一般驗證屬性(required填寫屬性,maxlength最長長度,pattern驗證格式是否正確)
![](https://i.imgur.com/5xSdS02.png)
LRSY身分證開頭沒有了合併掉(2010.12.25 Y(1975))
# 14-3 form attribute
![](https://i.imgur.com/llXV9e9.png)
![](https://i.imgur.com/ql41mdc.png)
autofocus游標停留屬性 
placeholder取代掉前面屬性
autocomplete關掉元素
readonly只能夠放在輸入文字的元素(後台可收到傳值)
datalist資料清單
disabled沒辦法做任何功能(點不到傳值)
size寬度
multiple下拉式選單可選多個
datalist要+id=(list="urllist")![](https://i.imgur.com/Q6V85yY.png)
# 15-1 特殊字元的使用
![](https://i.imgur.com/UYKAvrB.png)
開始是and&結束分號;![](https://i.imgur.com/s0loxZT.png)
# 15-2 字型樣式進階設定
![](https://i.imgur.com/xVj7ebK.png)
font-family(字型命名)![](https://i.imgur.com/KAl90ln.png)
外掛:![](https://i.imgur.com/YNzJyzr.png)
https://fonts.google.com/
https://shubo.io/preload-prefetch-preconnect/
@import必須擺第一行
@import擺外掛檔也是第一行
![](https://i.imgur.com/WXNOH0e.png)
![](https://i.imgur.com/vSTqS8Y.png)
![](https://i.imgur.com/Q6YdcGU.png)
多個外掛檔連接
``<link rel="stylesheet" href="styles//ss.css">``
![](https://i.imgur.com/Wdnii3k.png)
# 15-3 文字樣式屬性
![](https://i.imgur.com/laJLi2j.png)
文字的值一定要大於字體大小
line-height>要大於字
上下平均分配![](https://i.imgur.com/bnDcKVM.png)
div區塊(vertical-align)無效的
vertical-align只能在td
line-height如果擺在div就需要大小跟div依樣(div要定高度)
# 16-1 文字多欄版面
![](https://i.imgur.com/tOn2yTr.png)
# 16-2 背景樣式(background)
![](https://i.imgur.com/xGylgbN.png)
![](https://i.imgur.com/ehHh9OZ.png)
![](https://i.imgur.com/J8uoqHC.png)
body textarea多行輸入
# 16-3 背景樣式(background)
![](https://i.imgur.com/kahzTY5.png)
如果兩個值只給一個值 就會在正中間
background-position用在不重複貼
# 17-1.3 display樣式&visibility樣式
可否顯示
![](https://i.imgur.com/PyEVycG.png)
none不占任何空間
可否可見
![](https://i.imgur.com/rE3RlEJ.png)
# 17-2 overflow樣式
常用auto
overflow設定元件容器顯示
![](https://i.imgur.com/mvWb14C.png)
![](https://i.imgur.com/YaQodRO.png)
# 18-1定位(position)
![](https://i.imgur.com/7QufIXd.png)
static依照排列順序
relative指定它在位子
![](https://i.imgur.com/ERO6qLj.png)

# 18-2陰影
![](https://i.imgur.com/ba7UhcA.png)
# 18-3Media Querise
![](https://i.imgur.com/fZuoUmG.png)
all
screen
print
speech
# 18 Media Queries 
![](https://i.imgur.com/GVxfzOg.png)
# Media Queries語法
or(,或) 直接寫英文"and(兩個都要成立) not(只要不式它) only(只有)"
寫在style裡面
![](https://i.imgur.com/mBVHe9V.png)

# Media Queries範例
![](https://i.imgur.com/5i6FrOM.png)
![](https://i.imgur.com/6MG1OtD.png)


# ico
用圖片![](https://i.imgur.com/hvqFrJO.png)
小畫家裁剪->https://www.ifreesite.com/favicon/ ->![](https://i.imgur.com/1lwp2fE.png)
->檔名必須為(favicon.ico)且不能更改![](https://i.imgur.com/5T6rawW.png)->![](https://i.imgur.com/tNbz2IK.png)
->![](https://i.imgur.com/KQ3NLzC.png)



# 題外:
老師遇到的問題:![](https://i.imgur.com/hOtOMGL.png)
找不到年 老人家歧視
