zoukankan      html  css  js  c++  java
  • 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                 
        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就可以直接运行看到效果啦

    明日关键词:图片标签分桢标签音频/视频标签表格标签

  • 相关阅读:
    SQL 递归查询(根据指定的节点向上获取所有父节点,向下获取所有子节点)
    限流脚本
    使用DANT做FTP的转发代理
    忘记token怎么加入k8s集群
    CentOS7.x使用overlay2文件系统
    文件已删除但句柄没有释放导致磁盘空间用完
    多线程学习(一)什么是多线程?
    自己用过的web软件tools软件以及玩过的游戏
    day1 学习历程
    git合并请求
  • 原文地址:https://www.cnblogs.com/zhyunfe/p/6151471.html
Copyright © 2011-2022 走看看