概述
-
HTML/CSS/JS
C/S和B/S架构
-
C/S架构
-
client：客户端
-
server：服务器
-
-
B/S架构
-
browser：浏览器
-
server：服务器
-
工具
-
编辑工具：notepad++
-
测试工具：chrome
原理
-
浏览器 => 服务器，发送请求，索要相关数据
-
服务器 => 浏览器，返回数据(响应)，然后浏览器解析收到的数据，就会出现相应的效果
-
组成：HTML、CSS、JS
HTML
-
说明：超文本标记语言，所见即所得
-
后缀：.html或.htm，统一使用.html
标签
-
格式：
-
双边：
<标签名 属性1="值1" 属性2='值2' 属性3=值3>内容</标签名> -
单边：
<标签名 属性1="值1" 属性2='值2' 属性3=值3 />
-
-
特点：
-
成对出现
-
容错性强
-
已经预定义
-
全部小写，注意格式
-
-
说明：标签就是HTML的组成部分
- 01-first.html
<marquee direction="right" scrollamount='20' loop=1>今天是个好日子</marquee>
全局架构标签
-
示例：
<html>
<!-- 注释 -->
<head></head>
<body></body>
</html> -
说明：
-
html：所有的内容都要放在该标签中
-
head：存放头部，如：编码等
-
body：有效的内容，会出现在网页中
-
-
body属性:
-
text：字体颜色
-
bgcolor：背景色
-
-
几乎每个标签都有的属性：
-
class、name、id、style
-
可以在后面结合css及js使用
- 02-global.html
-
<html> <!-- 注释 --> <head> </head> <body text="red" bgcolor="blue"> 这是页面的内容 </body> </html>
字符实体
-
说明：在html中显示有特殊意义的内容，如：标签相关内容
-
字符实体：用特定的一串字符代表某一个有特殊意义的字符
-
示例：
<： <
>: >
空格:
&： &； - 03-shiti.html
-
<html> <head></head> <body> <a>百度一下</a> sdhsk jdksjaldj saldjasjdas & </body> </html>
常用标签(文本修饰)
-
h1 ~ h6：字体从大到小，表示标题，h1一个页面中最多一个，不要为了调整字体大小而使用。
-
加粗：b、strong
-
斜体：i、cite、em
-
下划线：u
-
中划线：s
-
下标：sub
-
上标：sup
-
字体：font
-
size：大小
-
color：颜色
-
face：类型
-
-
换行及空格：
-
br：换行标签，一段文本无论多长都不会换行，除非有用于隔断的空白
-
空格：无论多少个空格，解析后都会变成一个
-
回车：无论多少个，都会解析成一个空格
- 04-wenben.html
-
<html> <head></head> <body> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h6>六级标题</h6> 正常字体 <b>加粗字体</b> <strong>加粗字体</strong> <i>斜体</i> <cite>斜体</cite> <em>斜体</em> <u>鹅鹅鹅</u> <s>没用的东西</s> <br /> 内容<sub>下标</sub> 内容<sup>上标</sup> <br /> <font size="20" color="pink" face="宋体">这是一段需要修饰的文本</font> <br /> asdh qwowiqrp iewp[peipeitopieptiepie [pwo[eoqw[oewpoeopwqpieoqo eiwueiouwqieuiwqueiuqwieuwiqueiwqueiuwiruy3reuwyiruefjsbjczn,nzksdlsjdaldjlajdlajkdlskaskdajdkjsadksahdjkashdjkshjdh sjkdajskhdklaljljwopwiouryutywey tiewiwotieytueyty </body> </html>
常用标签(格式控制)
-
br：换行(单边标签)
-
p：段落
-
hr：分割线(单标标签)
-
marquee：滚动显示
-
pre：原样输出
-
ul：无序列表，每个元素都是li
-
type：disc(实心圆，默认)，circle(空心圆)，square(实心方块)
-
-
ol：有序列表，每个元素都是li
-
type：1、a、A、I
-
start：起始位置
- 05-geshi.html
-
<html> <head></head> <body> 女：在古代，姐的颜值可以撑起整个青楼<br /> 男：(若有所思)，你的意思是你长的像柱子 <hr /> <p>火箭（60-14）取得9连胜，队史首次单赛季达到60胜。詹姆斯-哈登只打了前三节，打出三双，贡献18分、15次助攻和10个篮板，埃里克-戈登22分，特雷沃-阿里扎14分，克林特-卡佩拉14分8个篮板，PJ-塔克12分。替补出场的杰拉德-格林得了25分7个篮板，周琦打了3分钟，得2分2个篮板，没有失误。火箭投中20记三分。[为周琦加油为火箭打call！篮球大师更多神迹等你来创造]</p> <p>老鹰（21-53）三连败，继续在东部垫底。陶里安-普林斯拿下了28分6个篮板，伊塞亚-泰勒26分，替补出场的泰勒-多西16分。【技术统计】</p> <hr /> <pre> 从今天开始，我们步入了新的阶段，进行学习 主要的内容是前端，包括：html、css、js 今天首先讲的时html，我对前端的认识加深了许多 </pre> </body> </html>
06-liebiao.html
<html> <head></head> <body> <ul type="disc">郑州市 <li>二七区</li> <li>金水区</li> <li>中原区</li> <li>高新区</li> </ul> <ol type="I" start="3"> <li>河南省</li> <li>河北省</li> <li>山东省</li> <li>山西省</li> <li>湖北省</li> <li>湖南省</li> </ol> </body> </html>
练习：
-
每个标签至少3遍
-
建议：可以参考网页书写
-
有精力可以预习(适当的学习几个常用标签)，a、img、video、table、form、input