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属性只有水平方向才会产生边距,垂直方向设置的边距没效果。

笔记

给标签设置属性(样式):不同的样式用“;”隔开,属性名字和值之间用“:”

adff

也可以在head标签里面设置



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


    
    
    
    
    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
这是一个div1
这是一个div2
display

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

css盒子模型

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

你可能感兴趣的:(HTML学习(一))