HTML学习（一）

动脑笔记

什么是 HTML？

• HTML 是用来描述网页的一种语言。
• HTML 指的是超文本标记语言 (Hyper Text Markup Language)
• HTML 不是一种编程语言，而是一种标记语言 (markup language)
• 标记语言是一套标记标签 (markup tag)
• HTML 使用标记标签来描述网页

标签分类---块级元素和行内元素

块级元素：

div
h(x) - 标题
p - 段落
table 表格
ul - 非排序列表

行内元素

span - 常用内联容器（嵌套在其他容器中，把它包含的内容文本定义颜色、字体等属性），定义文本内区块
a - 锚点
i - 斜体
img - 图片
input - 输入框

不同点

• 块级元素一个标签独占一行，其宽度自动填满父级元素宽度（不是高度），行内元素不会独占一行，相邻的行内元素会排列在同一行，知道排不下才另一行，其宽度随内容的变化而变化
• 块级元素可以设置with、height属性，而行内元素即使设置了这些属性是无效的。（除非设置了样式的display属性为block属性，行内元素和块元素是可以通过display属性修改来转换的，只是默认的属性值不同而已）
• 行内元素设置的margin、padding属性只有水平方向才会产生边距，垂直方向设置的边距没效果。

---

笔记

给标签设置属性（样式）：不同的样式用“；”隔开，属性名字和值之间用“：”

<div style="border: 1px solid red;background-color: aquamarine">adff</div>

也可以在head标签里面设置

<style type="text/css"> <!--type属性说明样式的格式为css-->
        //“*”为通配符，表示所有标签都有这个属性（标签选择器）
        *{
            /*border: 1px solid red   border的样式格式，记住*/
            border: 1px solid red;
            margin-left: 0px;
            margin-right: 0px;
        }

    </style>

另外在head标签里面还是设置一些全局属性

<!--设置javaScript 的文件路径和数据类型-->
    <script type="text/javascript" src="03.js"></script>
    <!--设置当前页面的数据类型-->
    <meta http-equiv="content-type" content="text/css" charset="UTF-8">
    <!--标题，浏览器最上面标签的标题-->
    <title>Title</title>

标签选择器

      *{
            /*border: 1px solid red   border的样式格式，记住*/
            margin-left: 0px;
            margin-right: 0px;
        }
        /*标签选择器： 表示页面所有的div标签的样式*/
        div {
            color: blueviolet;
            width: 200px;
            height: 300px;
            background-color: blueviolet;
        }
        /*标签选择器： id选择器表示id为mydiv的标签的样式*/
        #mydiv{
            color: red;
            width: 200px;
            height: 200px;
            display: block;
            display: inline;
            display: inline-block;
            background-color: aquamarine;
            border: 2px solid red;
            border-right: 4px solid red;
        }
        /*标签选择器： class选择器，和id不是的是class可以有多个相同的，而id只允许有一个*/
        .cls_div{
            color: red;
            width: 200px;
            height: 200px;
            background-color: chartreuse;
            border: 2px solid red;
            border-right: 4px solid red;
           /*表示上下左右边距*/
            padding: 10px; 
            /*表示上下、左右*/
            padding: 10px 40px;
            /*表示上 左右  下*/
            padding:10px 10px 10px 10px;

        }

<div>这是一个div</div>
<div id="mydiv">这是一个div1</div>
<div class="cls_div">这是一个div2</div>

display

display属性为修改标签的类型，inline-block为既可以修改宽高，也可以在同一行。

css盒子模型

盒子模型是指，标签都是一些“盒子”，有margin、padding，等边距属性还有border边框，组成盒子的大小。