7天学会HTML-Day01_七日学会html-CSDN博客

本文链接：https://blog.csdn.net/github_36700243/article/details/62430380

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所在的盘符为基准
        / 代表盘符根目录
站点绝对路径
        /代表网站根目录