7天学会HTML-Day01
HTML初步
关键词： B/S C/S 、服务器访问原理、标签、html特性、列表、图片
1、B/S 和C/S 架构
B/S -> browser/server 浏览器服务器架构
C/S -> client/server 客户端服务器架构
现在主流的是B/S架构，比较方便，节省成本
2、服务器访问原理
HTML(hypertext markup language)文件的组成 超文本标记语言
1. html由html、css、js组成。浏览器是翻译官，它把html文件翻译成页面
2.文件名不能是中文
3.文件存储格式:UTF-8无BOM格式
3、全架构标签
<!--文档类型-->
<!DOCTYPE HTML>
<!--根标签-->
<html>
<head>
<!--头部-->
<title>
<!-- title:网页标题
SEO(search engine optimization)通过大量堆积关键词提高搜索排名-->
</title>
<!--告诉浏览器以指定编码显示html文件 -->
<meta charset=’UTF-8’/>
</head>
<body>
<!-- 主体-->
</body>
</html>
body属性
leftmargin 左边距
rightmargin 右边距
topmargin 上边距
bottommargin 下边距
bgcolor 背景颜色
text 文字颜色
background 背景图片，会覆盖背景颜色
link:未点击时候的超链接颜色
alink：点击的时候超链接颜色
vlink:访问过后的超链接颜色
全局属性
class、id、name、style
4、html特性
1.如果单词中间没有空格，不会换行
2.无论有多少个空格，换行都只显示一个空格
5、标签
学习标签主要记功能
格式：
对标签：<标签名 属性1=”值1”></标签名>
独立标签:<标签名 属性1= “值1”/>
规范
1.标签不区分大小写，一般小写
2.标签写的时候应该是英文半角
3.标签可以潜逃
4.标签容错行郝，一般不会出错
a.标题：
<h1></h1>
...
<h6></h6>
h1标签一个页面只要一个，否则不能提高搜索排名
b.水平分割线:
类别:独立标签
属性：
align:对齐方式 left center right
width:200 绝对值 50% 百分比
c.段落：
类别：对标签
单独占一行
d.换行：
类别：独立标签
不自动换行：<nobr></nobr>
e.属性修饰：
加粗：<b></b> <strong></strong>
斜体：<i></i> <em></em> <cite></cite>
下划线：<u></u>
中删除线：<del></del>
上标：<sup></sup>
下表：<sub></sub>
保留原来的格式：<pre></pre>
块引用：<blockquote></blockquote>
字体：<font></font>
face 字体名称
size 字体大小 1—7
color 字体颜色
f.滚动文本：
类别：对标签
属性：
loop 循环次数
direction 方向
scrollamount 滚动速度
g.实体引用：
作用：可以表示html特殊符号，以&开始，以;做结束
空格
< 小于号
> 大于号
" 双引号
' 单引号
© 版权
™ 商标
<!—注释内容 --> 方便他人阅读代码，方便调试
h.列表标签
1.有序表：<ol></ol>
属性：
start 开始的位置，只能是数字
type 显示的类型 1、a、A、i、I
2.无序表：<ul></ul>
属性：
type（disc，square，circle）
3.自定义列表<dl></dl>
<dt></dt>条目
<dd></dd>内容
i.图片标签(独立标签)
<img src=’’ title=’’ border=’’ width=’’/>
相对路径
./当前目录(html文件所在的目录)
../当前目录的上级目录
./images/ 当前目录下级目录
绝对路径
本地文件系统的绝对路径
以html所在的盘符为基准
/ 代表盘符根目录
站点绝对路径
/代表网站根目录
今天到此位置，html很简单，创建一个.text文件,然后将尾缀改成.html就可以直接运行看到效果啦
明日关键词：图片标签 、分桢标签、 音频/视频标签、 表格标签
