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