码迷,mamicode.com
首页 > Web开发 > 详细

web第一章

时间:2018-11-15 22:27:29      阅读:163      评论:0      收藏:0      [点我收藏+]

标签:有序列表   文件浏览器   组成   body   显示效果   地址   结构   技术分享   ini   

HTML介绍

HyperText(超文本) Markup(标记) Language(语音) 类似于XML都是由标签组成
  • xml:是可扩展标记语言,标签可以任意自定义
  • HTML:不可以使用任意标签,学习html主要学习的就是html里面有哪些固定的标签,学习标签内部有哪些属性,还要学习标签和标签之间的嵌套关系
  • 超文本: 不仅仅是文本,还包括字体大小,颜色,样式等,还包括多媒体相关(图片,音频,视频)

浏览器兼容性问题

  • 因为不同的浏览器可能会存在兼容性问题,所以平时测试时统一使用谷歌浏览器

HTML文件结构

HTML中常见的各种标签

  1. 文本标题标签 独占一行 属性 align="left/center/right"

    ---->

  2. 段落标签 独占一行

  3. 换行


  4. 水平线


简历练习:

    <h1 align="center">苍老师简历</h1>
    <hr>
    <h2>基本信息</h2>
    <p>姓名:苍老师</p>
    <p>性别:男</p>
    <p>爱好:苍老师</p>
    <hr>
    <h2>基本信息</h2>
    <p>曾获得2018年达内男神评选第一名<br>
    年轻时获得某校校草第一名荣誉</p>

列表标签

无序列表

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
</ul>

有序列表

    <ol type="1" start="5" 
    reversed="reversed"><!-- ordered list -->
        <li>打开冰箱门</li>
        <li>把大象放进冰箱</li>
        <li>关上冰箱门</li>
    </ol>

定义列表

    <dl><!-- definition list定义列表 -->
    <!--definition title/term定义标题  -->
        <dt>凉菜</dt>
        <!--definition description 定义描述  -->
        <dd>大拌菜</dd>
        <dd>芥末鸭掌</dd>
        <dd>花毛一体</dd>
        <dt>炒菜</dt>
        <dd>木须肉</dd>
        <dd>葱爆羊肉</dd>
        <dd>溜三样</dd>
    </dl>

列表嵌套

有序和无序列表之间可以任意嵌套n层

分区标签

  • 分区标签自身没有显示效果,可以理解成一个容器,用于装页面中的元素,对页面中的元素进行统一管理。
  • div:块级分区元素,独占一行
  • span:行内分区元素,共占一行
  • 以后开发的页面一般会分为三大区:头 体 脚

    <div>头部</div>
    <div>体部</div>
    <div>脚部</div>
    
  • h5标准中增加了几个专门用于分区的元素用来取代div,相比div可读性更强见名知意
    头部
    体部
    脚部

标签的分类

  1. 块级元素:独占一行 包括:div,h1-h6, p,hr
  2. 行内元素:和其它行内元素共占一行 包括:span,斜体i和em,粗体 b和strong,下划线 u, 删除线 s和del

空格折叠现象

  • 如果一行内连续多个空格最终只会识别为一个 通过  

常见需要转义的特殊字符(实体引用)

  • 空格  
  • 小于号 <
  • 大于号 >
  • 换行

图片标签

  • 技术分享图片 是单标签
  • 常见属性:
  • alt:当图片不能正常显示的时候显示此内容
  • src:路径,站内资源使用相对路径 和站外资源使用绝对路径
  • title:当鼠标悬停的时候显示的文本
  • width/height: 通过像素设置宽高,通过百分比设置宽高,如果只设置宽度高度会根据原始宽高比进行缩放

图片地图

    <map id="xxx" name="xxx">
        <area shape="circle/rect" coords="280,330,32" 
    href="http://doc.tedu.cn">
    </map>
  • href:指定访问的路径,地址可以指向页面(站内或站外),还可以指向文件,如果文件浏览器可以打开则直接浏览,如果打不开则下载此文件

课程回顾

  • html文件的结构

    <!DOCTYPE html> 文档声明告诉浏览器使用什么版本解析页面
    <html>
        <head> 里面写给浏览器看的内容
            <meta charset="UTF-8">
            <title>页面标题</title>
        </head>
        <body>
            写给用户看的内容
        </body>
    </html>
    
  • 文本标题 h1-h6 属性: align = left/center/right
  • 段落标签 p
  • 水平分割线 hr
  • 换行 br
  • 列表:
  • 无序列表: ul li

    <ul>
        <li>aaa</li>
        <li>bbb</li>
    </ul>
    
  • 有序

    <ol type="i/a/A/i/I" start="5" reversed="reversed">
        <li>aaa</li>
        <li>bbb</li>
    </ol>
    
  • 定义列表

    <dl>
        <dt></dt>
        <dd></dd>
        <dd></dd>
    </dl>
    
  • 分区元素
  • div: 块级 独占一行
  • span: 行内 共占一行
  • 页面会分为三大部分 头
  • 元素分类
  • 块级元素 包括 div h1-h6 p hr
  • 行内元素 包括 span i和em b和strong u下划线 s和del
  • 空格  
  • 小于号 <
  • 大于号 >
  • 换行
  • 图片 技术分享图片
  • 图片地图

web第一章

标签:有序列表   文件浏览器   组成   body   显示效果   地址   结构   技术分享   ini   

原文地址:https://www.cnblogs.com/ahaijava/p/9965976.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!