html入门基础

最新推荐文章于 2024-02-25 10:54:21 发布

qq_41532376

最新推荐文章于 2024-02-25 10:54:21 发布

阅读量166

点赞数 2

分类专栏：前端 # servler sql 文章标签： html入门

servler sql 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

前端

1 篇文章 0 订阅

订阅专栏

教你写一个简单的网页（html网页开发入门）
2017年10月16日 15:02:49 Tom哥哥阅读数：16500更多
个人分类： php
网页的组成
HTML
网页的具体内容和结构

CSS
网页的样式（美化网页最重要的一块）

JavaScript
网页的交互效果，比如对用户鼠标事件作出响应

HTML
什么是HTML
HTML的全称是HyperTextMarkupLanguage，超文本标记语言
其实它就是文本，由浏览器负责将它解析成具体的网页内容

比如，浏览器会将下面的HTML代码

知乎
CSDN
博客园

1 2 3 4 5 转化为知乎黑马 CSDN 的网页内容

HTML的组成
跟XML类似，HTML由N个标签（节点、元素、标记）组成

HTML语法非常松散
常见的HTML标签
标题：h1,h2,h3,h4,h5…
段落：p
换行：br
容器：div,span（用来容纳其他标签）
表格：table,tr,td
列表：ul,ol,li
图片：img
表单：input
链接：a
推荐开发工具（网络三剑客）dreamweawer、flash、fireworks；WebStorm.

第一个网页这是网页的内容百度

    <h1>666666666</h1>
    <h2>666666666</h2>
    <h3>666666666</h3>
    <h4>666666666</h4>
    <h5>666666666</h5>

    <p>ppppppppppp</p>

<div>
    <p>ppppppppppp</p>
</div>

    <ul>
        <li>hahaha</li>
        <li>hahaha</li>
        <li>hahaha</li>
    </ul>

    <ol>
        <li>ahahah</li>
        <li>ahahah</li>
        <li>ahahah</li>
    </ol>

<img src="text.png">
</body>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 CSS 什么是CSS CSS的全称是Cascading Style Sheets,层叠样式表它用来控制HTML标签的样式，在美化网页中起到非常重要的作用

CSS的编写格式是键值对形式的，比如
color : red
background-color : blue
font-size : 20px
冒号左边的是属性名，冒号右边的是属性值

CSS三种书写方式
行内样式：（内联样式）直接在标签的style属性中书写
123
1
内页样式：在本网页的style标签中书写
123

1
2
3
4
5
6
7
外部样式：在单独的CSS文件中书写，然后在网页中用link标签引用
test.css

span {
color:yellow;
background-color:blue
}
1
2
3
4
test.html

123

1 2 CSS选择器选择器的作用选择对应的标签，为之添加样式

标签选择器根据标签名找到标签
类选择器标签可以有多个类
id选择器 id是唯一的，不能一样
选择器组合中间不留空格，粘在一起
后代选择器中间一个空格，不管嵌套多少层
相邻兄弟选择器
属性选择器

div1

div2

与div相邻的p

<div class="first">123</div>
<div id="first">123</div>

<p class="first second">123</p>
<p id="second">123</p>

<h1>hhh</h1>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 伪类属性描述 :active 向被激活的元素添加样式 :focus 向拥有键盘输入焦点的元素添加样式 :hover 当鼠标悬浮在元素上方时，向元素添加样式 :link 向未被访问的链接添加样式 :visited 向已被访问的链接添加样式 :first-child 向元素的第一个子元素添加样式 :lang 向带有指定lang属性的元素添加样式 :first-letter 向文本的第一个字母添加特殊样式 :first-line 向文本的首行添加特殊样式 :before 在元素之前添加内容 after 在元素之后添加内容

</div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 选择器优先级针对性越强，优先级越高选择器的权值通配选择符（*）:0 标签：1 类：10 属性：10 伪类：10 伪元素：1 id：100 important：1000

原则：选择器的权值加到一起，大的优先；如果权值相同，后定义的优先
important > 内联 > id > 类 > 标签｜伪类｜属性选择器 > 伪元素 > 通配符 > 继承

CSS标签的类型
HTML有N多标签，根据显示的类型，主要可以分为2大类
块级标签，独占一行的标签
行内标签（内联标签），多个行内标签能同时显示在一行

修改标签的显示类型
CSS中有个display属性，能修改标签的显示类型
属性说明
none 隐藏标签
block 块级类型，独占一行,能随时设置宽度和高度
inline 行内类型（内联类型），多个行内标签可以显示在同一行，宽度和高度取决于内容尺寸
inline-block 行d内-块级类型（内联－块级类型），多个行内标签可以显示在同一行，能随时设置宽度和高度
CSS属性
CSS有N多属性，根据继承性，主要可以分为2大类

可继承属性

父标签的属性值会传递给子标签
一般是文字控制属性

不可继承属性

父标签的属性值不能传递给子标签
一般是区块控制属性

CSS属性－可继承属性
所有标签可继承
visibility、cursor

内联标签可继承
letter-spacing、word-spacing、shite-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction

块级标签可继承
text-indent、text-align

列表标签
list-style、list-style-type、list-style-position、list-style-image

CSS属性－不可继承属性
display、margin、border、padding、background
height、min-height、max-height、width、min-width、max-width
over-flow、position、left、right、top、bottom、z-index
float、clear
table-layout、vertical-align
page-break-after、page-bread-before
unicode-bidi

盒子模型
网页上每一个标签都是一个盒子
每个盒子都有四个属性

属性说明
内容（content）盒子里装的东西，网页中通常是指文字和图片
填充（padding，内边距）怕盒子里装的（贵重的）东西损坏，而添加的泡沫或者其它抗震的辅料
边框（border）盒子本身
边界（margin，外边距）盒子摆放的时候不能全部堆在一起，盒子之间要留一定空隙保持通风，同时也为了方便取出

123

456

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 内容（content）属性属性描述 height 设置元素高度 max-height 设置元素的最大高度 max-width 设置元素的最大宽度 min-height 设置元素的最小高度 min-width 设置元素的最小宽度 width 设置元素的宽度填充（padding，内边距）属性属性描述 padding 在一个声明中设置所有内边距属性 padding-bottom 设置元素的下内边距 padding-left 设置元素的做内边距 padding-right 设置元素的有内边距 padding-top 设置元素的上内边距边框border属性属性描述 border-width 宽度 border-style 样式 border-color 颜色 border-radius 圆角边界margin属性属性描述 margin 在一个声明中设置所有外边距属性 margin-bottom 设置元素的下外边距 margin-left 设置元素的左外边距 margin-right 设置元素的右外边距 margin-top 设置元素的上外边距[

参考连接，无意复制](https://blog.csdn.net/m0_37412958/article/details/78249890)