web第一章

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

HTML介绍

HyperText(超文本) Markup（标记） Language（语音） 类似于XML都是由标签组成

xml：是可扩展标记语言,标签可以任意自定义
HTML：不可以使用任意标签，学习html主要学习的就是html里面有哪些固定的标签，学习标签内部有哪些属性,还要学习标签和标签之间的嵌套关系
超文本：不仅仅是文本，还包括字体大小，颜色，样式等，还包括多媒体相关（图片，音频，视频）

浏览器兼容性问题

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

HTML文件结构

HTML中常见的各种标签

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

---->
段落标签独占一行
换行
水平线

简历练习：

    <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可读性更强见名知意
头部

体部

脚部

标签的分类

块级元素：独占一行包括：div，h1-h6, p,hr
行内元素：和其它行内元素共占一行包括：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）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行