潭州课堂25班：Ph201805201 WEB 之 HTML 第一课 (课堂笔记)

时间：2018-07-31 10:48:02 阅读：196 评论：0 收藏：0 [点我收藏+]

什么是HTML

　　超文本标记语言（HyperText
　　Markup Language，简称 HTML）

HTML 是一门标记语言，标记语言由一套标记标签组成，

学习 HTML，其实就是学习标签

技术分享图片

HTML的基本模板

技术分享图片

标签：

　　由尖括号包裹单词构成，eg：<html>,所以标签不可能以数字开头

　　标签不区分大小写，推荐小写

　　标签可以嵌套，但不能交叉嵌套

　　错误示例：<a><b></a></b>

　　正确示例：<a><b></b></a>

标签的使用样式及属性

标签使用样式：

　　1. 开始标签<a >标签体</a>结束标签
　　2. 自闭合标签，eg：<br>,<hr>,<input><img>

技术分享图片

标签属性：
a.通常为键值对形式出现，eg：color=“red” id = ‘eat’
b.属性只能出现在开始标签和自闭和标签内
c.属性名字全部小写，属性值必须用单引或者双引包裹
d.如属性名和属性值完全一样，直接写属性名即可，eg：“readonly”（input标签属性）

html文件各部分标签详解-- <body>

b.块级标签和内联标签：

　　 b.1 块级标签：<p>/<h1>/<table>/<ol>/<ul>/<form>/<div>

　　 b.2 内联标签：<a>/<input/>/<img/>/<sub>/<sup>/<textarea>/<span>

b.3 块级元素的特点：总在新行上开始高度，行高以及外边距和内边距都可控制

　　宽度缺省，则是它容器的100% 它可以容纳内联元素和其他块元素

　 b.4 inline元素特点：
　　和其他元素在一行上高，行高以及外边距和内边距不可改变

宽度就是其文字或图片宽度，不可改变

　　内联元素只能容纳文本或者其他内联元素

以下内容先做了解，后续css样式再做补充
b.5 行内元素注意：设置宽度width无效

　　设置高度height无效（可通过line—height来设置行高）

设置margin只有左右margin有效，上下无效

设置padding只有左右padding有效，上下则无效，注意元素范围是增大了，但是对元素周围的内容是没影响的。

标题标签 (header)
　　一般用在文章的标题，有h1~h6

技术分享图片

段落标签 (Paragraph)
　　会把 HTML文档分割成若干段落

列表标签
　　列表标签分为：有序列表、无序列表以及定义列表

div 标签
　　用于分化一个一个的区域

有序列表、无序列表、定义列表标签效果图

技术分享图片

布局标签：<div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .top{
            height:80px;
            width:100%;
            background: skyblue;
        }
        .midd{
            height: 200px;
            width: 80%;
            background: antiquewhite;
        }
        .bottom{
            height: 80px;
            width: 80%;
            background:green;
        }
    </style>
</head>
<body>
    <!--布局标签-->
    <div class="top"></div>
    <div class="midd"></div>
    <div class="bottom"></div>
</body>
</html>

有序列表、无序列表、定义列表标签代码贴图

技术分享图片

图片标签
　　图片标签，用于向页面插入图片

粗体/斜体标签
　　粗体标签将文字加粗，斜体标签将文字倾斜

超链接标签
　　超链接标签其实就是 a 标签，一般用于网页之间的跳转
　　还能做锚点，进行跳转

<a href="http://www.baidu.com"target="_blank"
title="提示文字">我是百度</a>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="http://www.baidu.com"target="_blank"
    title="提示文字">我是百度</a><br>

    <a href="javascript:vodi(0)">死锭，有 a 标签的样式但不跳转</a>

    <h3>第一章</h3>
    <a href="#text">页面内跳转，去第二章</a>
    <p>1234564878121545</p>
    <p>1234564878121545</p>
    <p>1234564878121545</p>
    <p>1234564878121545</p>
    <p>1234564878121545</p>
    <p>1234564878121545</p>
    <p>1234564878121545</p>
    <p>1234564878121545</p>
    <p>1234564878121545</p>
    <p>1234564878121545</p>
    <p>1234564878121545</p>
    <p>1234564878121545</p>
    <p>1234564878121545</p>
    <p>1234564878121545</p>
    <p>1234564878121545</p>
    <p>1234564878121545</p>
    <p>1234564878121545</p>
    <h3 id="text">第二章</h3>
    <p>1234564878121545</p>
    <p>1234564878121545</p>
    <p>1234564878121545</p>
    <p>1234564878121545</p>
    <p>1234564878121545</p>
    <p>1234564878121545</p>
    <a href="#">回到顶部</a>

</body>
</html>

文字标签
　　Span 标签是单纯的文字标签，只有配合 CSS 才能有效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span{
            color: yellow;
        }
    </style>
</head>
<body>
    <h3>我就是我，不一样<span>的烟火</span></h3>
</body>
</html>

　　技术分享图片