首页 > 代码库 > HTML相关知识

HTML相关知识

2024-10-10 09:33:02 217人阅读

1 Day01HTML

HTML5声明：<!doctype html>
1. <html>

1.1 HTML基本结构：

<head>

</head>

<body>

............

</body>

</html>

1.2meta(元元素):

编码格式设置：<meta charset=”UTF-8”>
设置当前HTML页面的关键字：<meta name=”keywords” content=”….”>
设置当前HTML页面的描述：<meta name=”description” content=”….”>
设置当前页面的作者：<meta name=”author” content=”….”>
标签只关注语义化, 一般HTML页面只包含一个<h1>元素
<h1></h1>标签用得最多，搜索引擎也会抓取h1里面的内容
<h2>用的较多，最多用到<h3>
属性:<h1 align=”center”>这是一个1级标题</h1>
1. “这是一个1级标题” 会在浏览器中间显示
2. 有关样式和位置都是有CSS控制, align一般不使用
3. 常用属性:id, class, style…
4. 事件属性会是以后学习的重点
5. 段落的效果和标题很像，只是字体不一样
6. 浏览器兼容问题：相同的内容在不同的浏览器显示不同
7. 编写文本是有空格的，但是无论使用多少个空格浏览器只能识别一个，所以在实际开发中空格的作用几乎可以忽略不计
8. 编写文本的时候换行，但是在浏览器中显示仍然是没有换行的，需要加<br>命令换行如下：
  1. <p>

1.3标题<h1></h1>

1.4段落<p></p>:

这是一个段落<br>

这是一个段落

</p>

1.4 链接<a></a>:

基本格式:<a href=http://www.mamicode.com/”www.baidu.com”>百度一下</a>
target属性：
1. <a href=http://www.mamicode.com/”www.baidu.com” target=”_self” >百度一下</a>:链接会在当前窗口打开
2. <a href=http://www.mamicode.com/”www.baidu.com” target=”_blank” >百度一下</a>:链接会在新窗口打开
3. <a href=http://www.mamicode.com/”www.baidu.com” target=”_parent” >百度一下</a>:链接会在父级窗口打开
4. 有序列表<ol></ol>:
  1. 默认排序1,2,3,4,5…..
  2. 容器元素<ol>, 列表项:<li>
    1. <ol>

1.5列表：

</ol>

设置排序类型:
1. <ol type=”a”></ol> 以a,b,c,d….排序
2. <ol type=”A”></ol>以A,B,C,D…..排序
3. <ol type=”i”></ol>以I,ii,iii…..排序
4. 无序列表<ul></ul>:
  1. 排序使用小黑点
  2. 容器元素<ul>, 列表项<li>
    1. <ul><li></li>

</ul>

设置排序类型:
1. <ul type=”circle”></ul> 使用小圆圈排序
2. <ul type=”disc”></ul> 使用小黑点排序
3. <ul type=”square”></ul> 使用方形小黑点排序
4. 有序列表和无序列表可以互相嵌套
5. 定义列表<dl>,<dt>,<dd>
  1. <dl>容器; <dt>名称; <dd>内容;
    1. <dl>
          <dt>
              名字
          </dt>
           <dd>1.内容</dd>
          <dd>2.内容</dd>
          <dd>3.内容</dd>
      </dl>
    2. dt和dd不嵌套, 面试可能会问道

2 Day02HTML

2.1链接<a>

2.1.1连接的地址:

test.html存在于当前页面所在的test文件中

绝对地址：<a href=http://www.mamicode.com/” http://localhost:63342/Day02/test.html”>链接1</a> (链接地址是由Webstorm默认生成的server地址)
相对地址:<a href=http://www.mamicode.com/”test/test.html”>
代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接</title>
</head>
<body>
    <a href="http://www.mamicode.com/test.html">链接1</a><br>
    <a href="http://localhost:63342/Day02/test.html">链接2</a><br>
</body>
</html>

2.1.2回到顶部

先在body的最开始设置一个<a>标签,然后定义他的name属性：<a name=”top”></a> 为了让这个a标签不显示不设置他的href属性值和名称
设置主要内容
最后在设置一个href属性为#top的a标签:<a href=http://www.mamicode.com/”#top”>回到顶部</a>
代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接</title>
</head>
<body>
    <a name="top"></a>
    <a href="http://www.mamicode.com/test.html">唐诗</a>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <a href="http://www.mamicode.com/#top">回到顶部</a>
</body>
</html>

2.2图片元素<img>

<img>标签定义HTML页面的图像
<img>标签有两个固定属性

src:和href属性类似，设置需要显示在浏览器中的图片的地址

alt(在国内很少用)：设置浏览器不显示图片的文本内容

<img>可选属性
1. width：设置浏览器显示图片的宽度
2. height：设置浏览器显示图片的高度
3. 当只设置宽度或者高度时，图片的高度或宽度会在浏览中等比例显示，当设置两个属性时浏览器显示的图片可能会被拉伸
4. 浏览器加载图片时会从HTML页面跳出，图片越多浏览器加载越慢，所以可以浏览器每次加载几个图片
5. 代码示例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>图片元素</title>
    </head>
    <body>
        <img src="http://www.mamicode.com/img/1.jpg" width="300"/>
    </body>
</html>

2.3表格<table></table>

table标签表示表格-容器元素
属性：
1. border设置表格边框的宽度，如果border的值较大时只改变表格边框的宽度，里面的边框始终为1.
2. width表格的宽度，如果设置成100%表格大小会随着浏览器界面的变化而变化
3. <tr></tr>表格的行
4. <td></td>单元格
5. <th></th>第一行表头的单元格，显示字体加粗，居中
6. <thead></thead>表示表头在表格的第一行
7. <tbody></tbody>表格的数据在第一行和最后一行的中间
8. <tfoot></tfoot>表格的结尾在表格的最后一行
9. colspan=”2”合并2行, rowspan=”2”合并2列
10. <form>定义表单容器
11. 必要属性：
  1. action类似于a标签的href属性，地址需要编写服务器的某个资源
  2. method设置当前表单提交的方式
    1. get-容易把用户信息显示在浏览器地址中
    2. post-一般情况下都是这种方式
12. 标准属性：
  1. id设置当前标签的标识, 唯一
  2. name设置当前标签的名称, 可重复
13. 表单中所使用的输入框，按钮等组件
  1. <input>组件, 必要属性type, 设置当前input的类型
    1. text文本输入框,属性有value readonly

2.4表单<form></form>

password密码框,属性有value disabled readonly

<input type=”password” value=http://www.mamicode.com/”number” disabled=”disabled”>不能输入密码

submit提交按钮,属性有value

<input type=”submit” value=http://www.mamicode.com/”登录”>提交用户名, 密码

reset重置按钮,属性value

<input type=”reset” value=http://www.mamicode.com/”重置信息”>重置用户名, 密码

图片<input type = “image” src = http://www.mamicode.com/“1.jpg” width = “200”>

6. radio单选框,属性name checked

<input type=”radio” name=”group” checked=”checked”> 同属于group组的单选框, 在浏览器中默认是checked

7. checkbox复(多)选框,属性name checked

<input type=”checkbox” name=”group” checked=”checked”> 同属于group组的单选框, 在浏览器中默认是checked

8. file文件域默认选择一个文件, 设置multiple

<input type=”file” multiple>可以同时选择多个文件

9. hidden隐藏域【面试题隐藏域的作用是设置一些不想让用户看的数据】

<input type=”hidden” value=http://www.mamicode.com/”值”>不需要在浏览器中显示的值可以使用的到

10. email

<input type = “email”>email地址

<input type = “submit”>提交

<select>组件
1. 下拉单选列表, 属性id, name

</select>

下拉多选列表

</select>

3 Day03 CSS

3.1 CSS含义

3.1.1什么是CSS

：Cascading Style Sheet，层叠样式表；能够真正做到网页表现与内容分离的一种样式设计语言

3.1.2版本历史

CSS1：发布于1996年
CSS2：发布于1998或者1999年（不确定）
CSS3：现在
内联样式
1. 直接在元素里写入属性style=”CSS属性:CSS属性值;”， eg:<p style=”font-weight: bold ; color: red ;”>内容</p>
2. 通过HTML页面的<style>元素来设置CSS，

3.1.3如何使用CSS

eg: <style>
    选择器{
        CSS属性: CSS属性值 ;
        CSS属性: CSS属性值 ;
    }
</style>

外联样式
1. 通过HTML页面的<link>元素来引入外部的CSS样式

eg:<link rel=”stylesheet” href=http://www.mamicode.com/”外部CSS文件路径” type=”text/css”>

外部CSS样式内容格式

  选择器{
        CSS属性: CSS属性值 ;
        CSS属性: CSS属性值 ;
    }

3.2 CSS语法

3.2.1 语法特点

CSS的声明总是以键值对的形式出现
声明总是以分号(;)结束(注意区分输入法,一定是英文输入法的分号)
声明组以大括号括起来({})
每行只描述一个属性

3.2.2语法格式

选择器{
        CSS属性: CSS属性值 ;
        CSS属性: CSS属性值 ;
    }

3.3 CSS注释

不同于HTML, CSS的注释是以/*开始,以*/结束; 即:/* 注释内容 */
CSS注释同样不能嵌套

3.4 选择器

- 常见的选择器：

元素选择器

- 作用：可以选中页面指定标签名的元素

- 语法：标签名 {}

- 例子：div{} span{} p{} h1{}

id选择器

- 作用：根据元素的id属性值选中一个元素

- 语法：#id属性值{}

- 例子：#box1{} #p1{}

类选择器

- 作用：根据元素的class属性值选中元素

- 语法：.class属性值{}

- 例子：.box2{} .p2{}

分组选择器（并集选择器）

- 作用：可以同时选中多个选择器对应的元素

- 语法：选择器1 , 选择器2 , 选择器N {}

- 例子：div , #box1 , .hello , span {}

交集选择器

- 作用：可以选中同时符合多个选择器的元素

- 语法：选择器1选择器2选择器N {}

- 例子：p.hello{}

通配选择器

- 作用：选中页面中的所有元素

- 语法：*{}

- 注意：通配选择器性能较差，尽量避免使用

后代元素选择器

- 作用：选中指定的后代元素

- 语法：祖先后代{}

- 例子：div p span{}

子元素选择器

- 作用：选中指定的子元素

- 语法：父元素 > 子元素{}

- 例子：div > p > span{}

伪类选择器

- 伪类表示的元素的一种特殊状态

:link

- 正常的超链接（没有访问过的链接）

:visited

- 访问过的超链接

:hover

- 鼠标移入的元素

:active

- 鼠标正在点击的元素

- 元素之间的关系

- 父元素

- 直接包含子元素的元素

- 子元素

- 直接被父元素包含的元素

- 祖先元素

- 直接或间接包含后代元素的元素（父元素也是祖先元素）

- 后代元素

- 直接或间接被祖先元素包含的元素（子元素也是后代元素）

- 兄弟元素

- 拥有相同父元素的元素

3.4.6 选择器的优先级

选择器的优先级

- 当使用不同的选择器为同一个元素设置相同的样式时，此时会发生样式冲突。

这时候，显示哪个样式由选择器的优先级决定，优先级高的优先显示。

选择器的优先级：

内联样式1000 style

id选择器100 #box1{} #p1{}

类和伪类选择器10 .box2{} .p2{}

元素选择器 1 div{} span{} p{} h1{}

通配选择器 0 *{}

- 当比较两个选择器的优先级时，如果是复合选择器则需要将多个选择器的优先级进行相加，

然后再比较，优先级较高的优先显示，优先级相加时不会超过其最大的数量级

如果两个选择器的优先级一样，则优先显示靠下的。

- 如果在样式的最后添加了 !important 则此时样式会取得一个最高的优先级，将会优先于所有的样式显示

在开发中 !important 尽量不用。

3.5 颜色设置

英文名称, eg: red, yellow, blue, green…..
十进制,三原色, eg: RGB(255,0,250)红, RGB(0,255,0)绿, RGB(0,0,255)蓝…
百分比, eg: RGB(100%,0%,0%)红, RGB(0%,100%,0%)绿, RGB(0%,0%,100%)蓝
十六进制, eg: #ff0000红, #00ff00绿, #0000ff蓝, 两两相同可以写成#f00等
<h1>, <p>, <ul>, <table>, <div>
<div>元素没有特定的语义, 由于它属于块级元素, 浏览器会在其前后显示折行, 和CSS一同使用可以对大的内容块设置样式属性, <div>一个常见的用途就是文档布局
<div>取代了使用<table>进行页面布局的老式方法
<td>, <img>, <a>, <span>
<span>:是内联元素, 无语义, 可作为文本的容器, 结合CSS可以对部分文本设置样式属性

3.6 块级元素

3.7内联元素

4 Day04 CSS

4.1其他类型选择器

4.1.1 后代选择器: 祖先元素后代元素{CSS属性:CSS属性值;}

4.1.2子元素选择器: 祖先元素 > 子元素{CSS 属性:CSS属性值;}

4.1.3相邻元素选择器:指定元素+兄弟元素{CSS 属性:CSS属性值;}

4.2 伪类

a:link; 向未被访问过的链接添加样式

a:visited; 向已被访问过的链接添加样式

a:hover; 当鼠标悬浮在链接上方时，向元素添加样式

可用于任何元素

a:active;向被激活的元素添加样式

可用于任何元素

a:focus; 像拥有键盘输入焦点的的元素添加样式

a:first-child; 向元素的第一个子元素添加样式

4.3 盒子模型

content:显示盒子的内容和图像
padding:内边距, 会受到盒子填充背景颜色影响
1. padding: 50px;上下左右内编剧全是50px
2. padding:20px 50px;上下20px 左右50px
3. padding:20px 30px 50px;上20px,左右30px,下50px
4. padding:20px 30px 50px 70px, 上右下左分别是20,30,50,70px
5. padding-top, padding-right, padding-bottom, padding-left
6. border: 边框, 会受到盒子填充背景颜色影响
  1. 常见属性
    1. border-width
    2. border-color
    3. border-style
    4. 边框设置:border: width值 color值 style值;
    5. 上下边框样式设置规律和padding一样
7. margin:外边距,没有背景颜色, 完全透明
  1. margin上下左右边框设置可padding大致一样
  2. 外边距重叠:
    1. 当上下相邻两个盒子设置了margin-bottom和margin-top边框时盒子之间的距离是两个外边距最大的值
    2. 如果定义两个 <div> 标签是父子关系的话，当为作为子元素的 <div> 设置上外边距，该上外边距会传递给父元素的 <div>

5 Day05 CSS

5.1 Css盒子模型

content 内容区：定义显示在浏览器的标签。

主要的三个样式：

border-width

border-color

border-style

简写设置：

border-top/right/bottom/left

padding内边距：内容到边框的距离。

简写设置：

padding-top/right/bottom/left

border边框：盒子的边框。

margin外边距：盒子与盒子之间的距离

① 设置上、左（改变当前标签的显示位置）

② 设置下、右（改变当前标签的下一个兄弟元素的显示位置）

问题：①外边距的重叠

* 场景

* 两个相邻兄弟块级元素

* 上一个块级元素设置下外边距

* 下一个块级元素设置上外边距

* 结果

* 两个兄弟元素之间的距离取外边距的最大值

* 解决 - 结果等于两个外边距之和

* 只设置上一个块级元素设置下外边距或者只下一个块级元素设置上外边距

* 外边距的值允许是负值

* 值大于零 - 正常设置的外边距效果

* 值等于零 - 没有外边距效果

* 值小于零 - 两个标签之间出现覆盖效果

* 注意 - 在实际开发中，不要设置负值

* 默认样式

* 页面默认给<body>增加外边距

5.2 外边距的问题

1.子元素的外边距会传递给父元素

解决方案：只设置父元素的内边距，不设置子元素的外边距。

5.3外边距问题

为子元素设置上外边距时，子元素div和父元素div全部向下移动
1. 解决办法：为父元素设置边框，为父元素设置上内边距
2. 由于不同浏览器显示的默认样式不同，为了使显示效果相同，可以讲浏览器显示效果重置eg:body{margin:0;}，也可以使用第三方提供的重置样式
3. display:隐藏某个元素时不会占用任何空间，不影响布局
  1. 属性值
    1. none;当设置display属性为none是元素会被隐藏且不占用空间
    2. block;主要作用于内联元素，当将一个内联元素的display设置成block，该内联元素在浏览器中显示为块元素效果
    3. inline;和block相反，主要作用于块元素，将一个块元素设置display:inline，块元素在浏览器中显示为内联元素的效果
    4. inline-block;当讲一个元素设置成display:inline-block;是该元素在浏览器中显示为内联块级效果
4. visibility:隐藏某个元素时仍会占用空间
  1. 属性值
    1. visible;默认的，元素可见
    2. hidden;隐藏元素
5. overflow;
  1. visible;默认值，内容不会修剪，会呈现在元素框之外
  2. hidden;隐藏，内容多出来的部分会被隐藏
  3. scroll;内容会被修剪，但浏览器会显示滚动条用来查看溢出的内容
  4. auto;一旦内容溢出，被修剪，浏览器会显示滚动条用来查看溢出的内容
6. 将窗体自上而下分为一行一行，并在每行中按从左至右的挨次排放元素，即为文档流。HTML创建的元素默认都在文档流中。
  1. 块级元素：自上而下排列，子集元素宽度是父元素100%，
  2. 内联元素：从左到右依次排列，自动换行，宽度和高度都是有内容决定。

5.4默认样式

5.5 CSS显示与隐藏

5.6 元素内容溢出

5.7文档流

5.8 浮动（会从文档流中脱离）

float

none；默认值元素不浮动
left；元素左浮动
right；元素右浮动
块级元素浮动
1. 块级元素浮动不会独占HTML页面一行，所以多个块级元素可以处在同一行，块级元素的高度和宽度等于所有后代元素的总和
2. 内联元素浮动会呈现块级元素的效果
3. 所有浮动元素的层级都要高于文档流中元素的层级，但文字是个例外，文字不会被浮动元素覆盖，而是会环绕在浮动元素的周围

HTML相关知识

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > HTML相关知识

HTML相关知识

1 Day01HTML

1.1 HTML基本结构：

1.2meta(元元素):

1.3标题<h1></h1>

1.4段落<p></p>:

1.4 链接<a></a>:

1.5列表：

2 Day02HTML

2.1链接<a>

2.1.1连接的地址:

2.1.2回到顶部

2.2图片元素<img>

2.3表格<table></table>

2.4表单<form></form>

3 Day03 CSS

3.1 CSS含义

3.1.1什么是CSS

3.1.2版本历史

3.1.3如何使用CSS

3.2 CSS语法

3.2.1 语法特点

3.2.2语法格式

3.3 CSS注释

3.4 选择器

3.4.6 选择器的优先级

3.5 颜色设置

3.6 块级元素

3.7内联元素

4 Day04 CSS

4.1其他类型选择器

4.2 伪类

4.3 盒子模型

5 Day05 CSS

5.1 Css盒子模型

5.2 外边距的问题

5.3外边距问题

5.4默认样式

5.5 CSS显示与隐藏

5.6 元素内容溢出

5.7文档流

5.8 浮动（会从文档流中脱离）

看完仍有疑问？有类似问题直接问程序猿