第五章HTML - 秒客网

HTML介绍

标签：有一个头，一尾

<!DOCTYPE html>
<html lang="en">
<head>

   <!-- 文档的标题、编码方式及URL等信息,这些信息大部分是用于提供索引,辩认或其他方面的应用（移动端） -->

   <!-- 文档的标题 -->
   <title>路飞学城</title>

     <!-- 常用两个属性
      http-equiv:它用来向浏览器传达一些有用的信息，帮助浏览器正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
      -->
   <!--指定文档的内容类型和编码类型 -->
   <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

   <!-- 5秒之后 重定向 到路飞学城的网站 -->
   <!-- <meta http-equiv="refresh" content="5;URL=https://www.luffycity.com"/> -->

   <!--告诉IE浏览器以*模式渲染当前网页-->
   <meta http-equiv="x-ua-compatible" content="IE=edge">

   <!-- 为了我们的SEO优化  工作的时候下面这两句 要写-->
   <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
   <meta name="description" content="路飞学城">

   <!-- 定义我们的网站图标 -->
   <link rel="icon" href="./fav.ico">

   <!-- 引入外部样式表 -->
   <link rel="stylesheet" type="text/css" href="./index.css">

   <!-- 定义内部样式表 -->
   <style type="text/css">

   </style>

   <!-- 定义内容脚本文件 -->
   <script type="text/javascript">

   </script>

   <script src="./index.js"></script>

</head>
<body>

</body>
</html>

標題標籤h1~h6   沒有h7
<块级元素 1.独占一行 ， 2.可以设置宽高>

段落标签 <p></p>
也是独占一行

超链接标签<a></a>
代表一个超链接
<a href="www.baidu.com" target="_self" title="luffy">路飞学城</a>   #默认target是_self,在本页面打开，_blank是在新的页面打开,title：鼠标放在上面显示的内容
href="./a.zip"  代表下载压缩包
href="494187987@qq.com" 代表发送邮件
返回页面顶部的空链接或具体id值的标签 例如：<a href="#">内容</a>或<a href="#id值">内容</a>

　　javascript:是表示在触发<a>默认动作时，执行一段JavaScript代码。例如：<a href="javascript:alert()">内容</a>
　　javascript:;表示什么都不执行，这样点击<a>时就没有任何反应例如：<a href="javascrip:;">内容</a

段落标签也是块级元素

<ul type="circle">
<li>我的账户</li>
<li>我的订单</li>
<li>我的优惠券</li>
<li>我的收藏</li>
<li>退出</li>
</ul>

<ol type="a">
<li>我的账户</li>
<li>我的订单</li>
<li>我的优惠券</li>
<li>我的收藏</li>
<li>退出</li>
</ol>

三种： 
1.块级元素   独占一行，可设宽高 如果不设置宽度 浏览器的宽度 
2.行内元素  在一行内展示 不能设置宽高   它的宽高根据内容去填充
3.行内块元素  在一行内展示  可设宽高


盒子标签div

image标签
《1.可以设置宽高，2.在一行内显示  它叫行内块标签》

table标签
表头thead 里面用tr th
表体tbody 里面用tr td
表脚tfoot 里面用tr td

合并

rowspan 合并行(竖着合并)

colspan 合并列(横着合并)

span标签：显示文本

表单标签 form   各种标签用法

<body>
    <form action="http://www.baidu.com" method="get">
        <p>
            <!-- for 属性会关联name属性值-->
            <label for="username">用户名：</label>
            <input type="text"  name="username" placeholder="请输入用户名">
        </p>
        <p>
            <label for="password">密码：</label>
            <input type="password" placeholder="密码">
        </p>
        <p>
            <input type="submit" value="submit">
            <input type="button" value="button">
            <button>按钮</button>
        </p>

        <p>
            <label>用户性别：</label>
            <!-- name是显示在url上的，id是用于程序里面识别的 -->
            <input type="radio" name="sex" value="男" checked="">男
            <input type="radio" name="sex" value="女">女
        </p>
        <p>
            <input type="file" name="file">
        </p>

        <!-- 重置按钮-->
        重置按钮
        <input type="reset">

        <!-- 文本框，rows cols 设置长宽-->
        <p>
        自我介绍：
        <textarea rows="20" cols="100" placeholder="请做自我介绍"></textarea>
        </p>

        <!-- 列表 multiple实现多选，size设置选择框显示个数 -->
        <select name="place" size="2" multiple>
            <option value="广东">广东</option>
            <option value="*">*</option>
            <option value="北京">北京</option>
            <option value="广东">北京</option>
            <option value="广东">北京</option>
        </select>
    </form>
</body>

标签属性的使用注意事项

1.HTML标签除一些特定属性外可以设置自定义属性，一个标签可以设置多个属性用空格分隔，多个属性不区分先后顺序。

2.属性值要用引号包裹起来，通常使用双引号也可以单引号。

3.属性和属性值不区分大小写，但是推荐使用小写。

嵌套规则
1.块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素

　　<div><div></div><h1></h1><p><p></div> ✔️

　　<a href=”#”><span></span></a> ✔️

　　<span><div></div></span> ❌

2.块级元素不能放在p标签里面

　　<p><ol><li></li></ol></p> ❌

　　<p><div></div></p> ❌

3.有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是：h1~h6 p

4.li元素可以嵌入ul,ol,div等标签

<ul>

        <li>

            <ul>

                <li>

                    <div>

                    </div>

                </li>

                <li>

                    <ol>

                        <li></li>

                        <li></li>

                        <li></li>

                        <li></li>

                    </ol>

                </li>

            </ul>

        </li>

    </ul>


CSS

1.引入方式

内联样式

　　在head标签里面添加<style> 直接会对以下所有标签做更改

行内样式表

　　在单一行做样式，如<p style="color:red">

外部样式表
- 链接式

　　　　<link rel="stylesheet" href="index.css">

- 导入式

　　@import url(other.css) 必须写在文件最开始的位置。

链接式与导入式的区别

1、<link/>标签属于XHTML,@import是属性css2.1

2、使用<link/>链接的css文件先加载到网页当中，再进行编译显示

3、使用@import导入的css文件，客户端显示HTML结构，再把CSS文件加载到网页当中

4、@import是属于CSS2.1特有的，对于不兼容CSS2.1的浏览器来说就是无效的



CSS选择器

css的选择器：1.基本选择器  2.高级选择器

1.标签选择器
   标签选择器可以选中所有的标签元素，比如div，ul，li ，p等等
   不管标签藏的多深，都能选中
   选中的是所有的，而不是某一个，所以说 "共性"  而不是 ”特性“

2.id选择器
   # 选中id

   同一个页面中id不能重复。
   任何的标签都可以设置id  
   id命名规范 要以字母 可以有数字 下划线 -  大小写严格区分  aa和AA

3.类选择器

1.所谓类 就是class  . class与id非常相似 任何的标签都可以加类
但是类是可以重复    归类

2.同一个标签中可以携带多个类 用空格隔开

类的使用 能够决定前端工程师的css水平到底有多牛逼？

一定要有”公共类“的概念

总结：

1.不要去试图用一个类将我们的页面写完。这个标签要携带多个类，共同设置样式
2.每个类要尽可能的小，有公共的概念，能够让更多的标签使用

玩好了类 就等于玩好了css中的1/2

到底使用id还是用class？
答案：尽可能的用class。除非一些特殊情况可以用id

原因：id一般是用在js的。也就是说  js是通过id来获取到标签

 
伪类选择器

/*'爱恨原则' love hate*/

没有访问的超链接a标签样式：

a:link {

  color: blue;

}

访问过的超链接a标签样式：

a:visited {

  color: gray;

}

鼠标悬浮在元素上应用样式：

a:hover {

  background-color: #eee;

}

鼠标点击瞬间的样式：

a:active {

  color: green;

}

伪元素选择器
first-letter 指定第一个字母

div p:first-letter{
    content:"你好";
    color:red;
    font-size: 40px;
}

after,before  在前面 / 后面   必须搭配content一齐使用

div p:after{
    content:"你好";
    color:red;
    font-size: 40px;
}

CSS的继承规律：

<!-- 继承：给父级设置一些属性，子级继承了父级的该属性，这就是我们的css中的继承

有一些属性是可以继承下来 ： color 、 font-*、 text-*、line-*   文本元素

像一些盒子元素，定位的元素（浮动，绝对定位，固定定位）不能继承
 -->
层叠性，选择的优先权，数数，谁的权重大就谁被选择

<!-- 
   层叠性： 权重的标签覆盖掉了权重小的标签，说白了 ，就是被干掉了
   权重： 谁的权重大，浏览器就会显示谁的属性

   谁的权重大？  非常简单   数数

   id的数量  class的数量  标签的数量

 -->

padding的使用：内填充

/*小属性设置*/
/*padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;*/

/*综合属性设置，用空格隔开*/

/*上 右 下 左*/
/*padding: 20px 30px 40px 50px ;*/

margin使用:
上，左右，下
如果是margin：0 auto 14px  表示上方是0，左右是auto，下方是14ox

<!-- 
   比如说通常我们做站的时候，要清除默认的padding，margin

   * 效率不高。所以我们要使用并集选择器来选中页面中应有的标签（不同背，因为有人已经给咱们写好了这些清除默认的样式表）

   body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {
          margin: 0;
          padding: 0;
   }
 -->

利用border制作三角形

.box{
    width:0;
    height:0;
    border-bottom: 20px solid red;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
}

 标准文档流

<!--  什么是标准文档流
   宏观的将，我们的web页面和ps等设计软件有本质的区别
   web 网页的制作 是个“流”  从上而下 ，像 “织毛衣”
   而设计软件 ，想往哪里画东西 就去哪里画

   标准文档流下 有哪些微观现象？

   1.空白折叠现象
   2.高矮不齐，底边对齐
   3.自动换行，一行写不满，换行写
 -->

行内块元素、行内元素之间的转换
使用display：inline(行内元素) inline-block(行内块元素) block(块级元素)

CSS的属性用的最多的浮动：

<!-- 
   浮动是css里面布局最多的一个属性

   效果： 两个元素并排了，并且两个元素都能够设置宽度和高度

   浮动想学好：一定要知道它的四个特性：

   1.浮动的元素脱标
   2.浮动的元素互相贴靠
   3.浮动的元素有“字围”效果
   4.收缩的效果

 -->

1.脱标

<!-- 
脱标： 脱离了标准文档流
   小红盒子浮动了，脱离了标准流，此时小黄这个盒子就是标准文档流中的第一个盒子。所以就渲染到了左上方。  浮动元素 “飘起来了”

span标签不需要转成块级元素，也能够设置宽高。
所有的标签一旦设置浮动，能够并排，都不区分行内、块状元素，设置宽高

 -->

2.元素的互相贴靠

<!-- 
   如果父元素有足够的空间，那么3哥紧靠着2哥，2哥紧靠着1哥，1哥靠着边。
   如果没有足够的空格，那么就会靠着1哥，如果没有足够的空间靠着1哥，自己往边靠
 -->

3.字围效果

<!-- 所谓字围效果：
   当div浮动，p不浮动
   div挡住了p，div的层级提高，但是p中的文字不会被遮盖，此时就形成了字围效果

   关于浮动我们强调一点，浮动这个元素，我们初期一定要遵循一个原则

   永远不是一个盒子单独浮动，要浮动就要一起浮动。
 -->

浮动带来的负面影响：
里面的子元素会脱标，这样，如果父元素没有设置宽高，下面的div会自动往上面顶，使得子元素覆盖在div上面

解决浮动的效果：
①给父元素设置高度，只要是该元素的父元素就行，不一定是该div。

/*给父盒子设置高度，这种方式不灵活。如果哪天公司产品突然要改，要求父盒子高度变大，而且不仅一个地方哦，那么我们不可能去找源码去手动修改*/

②给浮动元素最后加一个空div，并设置clear：both（清除别人对我的影响） （常用）

<!-- 给浮动元素最后面加一个空的div 并且该元素不浮动 ，然后设置clear:both  清除别人对我的浮动影响-->
<!-- 内墙法 -->
<!-- 无缘无故加了div元素  结构冗余 -->

③伪元素选择器（常用）

.clearfix:after{
   /*必须要写这三句话*/
   content: '.';
   clear: both;
   display: block;
   height: 0;
   visibility: hidden;

加滚动条

overflow: scroll;

<!-- 当给两个兄弟盒子 设置垂直方向上的margin 那么以较大的为准，那么我们称这种现象叫塌陷 

浮动的盒子垂直方向 不塌陷

margin：

<!-- 
1.使用margin: 0 auto;水平居中盒子 必须有width，要有明确width，文字水平居中使用text-align: center;

2.只有标准流下的盒子 才能使用margin:0 auto; 
当一个盒子浮动了，固定定位，绝对定位了，margin:0 auto; 不能用了

3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center;
 -->

background-color:背景颜色
三种方法：①英文字母 ②十六进制 ③rgb(255,255,255)

background-img:背景图片

/*平铺*/
/*background-repeat*/
/*不平铺*/
/*background-repeat: no-repeat;*/

background-position：100px 100px

正值 第一个值表示往右偏移 第二个值表示往下 负值则相反

雪碧图，切图

background 和 background-img  
一个是综合属性，可以一行写多个属性，同时还包含background-repeat,background-position, background-color,background-attachment的属性
而background-img 只是其中一个属性

相对定位：relative 相对自身位置定位

/*如果对当前元素仅仅设置相对定位，那么与标准流下的盒子没有什么区别*/
position: relative;
/*设置相对定位 我们就可以使用四个方向的属性  top left right bottom

相对定位：相对于自己原来的本身定位 top:20px; 那么盒子相对于原来的位置向下移动。相对定位仅仅的微调我们元素的位置
*/

<!-- 相对定位三大特性： 1.不脱标  2.形影分离  3.老家留坑 :占着茅房不拉屎，恶心人 。 所以说 相对定位 在页面中没有什么太大的作用。影响我们页面的布局。但是我们不要使用相对定位来做压盖效果-->

<!-- 微调我们元素位置-->

绝对定位：

/*绝对的定位： 1.脱标 2.做遮盖效果，提升层级 3.设置绝对定位之后，不区分行内元素和块级元素，都能设置宽高。*/
position: absolute;

/*绝对定位参考点： 
1.当我使用top属性描述的时候 是以页面的左上角（跟浏览器的左上角区分）为参考点来调整位置
2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。
*/

绝对定位的参考点
①爷爷设置了绝对定位，爸爸设置了绝对定位，儿子设置了绝对定位，将以爸爸为参考点

②爷爷设置了绝对定位，爸爸没有设置了绝对定位，儿子设置了绝对定位，将以爷爷为参考点

/*父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点
这个父辈元素不一定是爸爸，它也可以是爷爷，曾爷爷。 如果父亲设置了定位，那么以父亲为参考点。那么如果父亲没有设置定位，那么以父辈元素设置定位的为参考点
*/

绝对定位的盒子无视父辈的padding

总结：

注意了：父绝子绝，没有实战意义，做站的时候不会出现父绝子绝。因为绝对定位脱离标准流，影响页面的布局。
相反‘父相子绝’在我们页面布局中，是常用的布局方案。
因为父亲设置相对定位，不脱离标准流，子元素设置绝对定位，仅仅的是在当前父辈元素内调整位置信息。

绝对定位：让盒子居中

/*设置绝对定位之后，margin:0 auto;不起任何作用，如果想让绝对定位的盒子居中。当做公式记下来 设置子元素绝对定位，然后left:50%; margin-left等于元素宽度的一半，实现绝对定位盒子居中*/

固定定位：

position: fixed;

/*固定定位：固定当前的元素不会随着页面滚动而滚动，
特性：1.脱标 2.提升层级 3.固定不变 不会随页面滚动而滚动

参考点：设置固定定位，用top描述。那么是以浏览器的左上角为参考点
如果用bottom描述，那么是以浏览器的左下角为参考点

作用： 1.返回顶部栏 2.固定导航栏 3.小广告

*/

/*设置固定定位之后，一定一定要加top属性和left属性*/

text-decoration：none
可以去除链接的基本样式，即去除了下划线

第五章HTML的更多相关文章

《Django By Example》第五章中文翻译（个人学习，渣翻）
书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者@ucag注:大家好,我是新来的翻译, ...
《Entity Framework 6 Recipes》中文翻译系列 (22) -----第五章加载实体和导航属性之延迟加载
翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇第五章加载实体和导航属性实体框架提供了非常棒的建模环境,它允许开发人员可视化地使 ...
精通Web Analytics 2&period;0 （7）第五章：荣耀之钥：度量成功
精通Web Analytics 2.0 : 用户中心科学与在线统计艺术第五章:荣耀之钥:度量成功我们的分析师常常得不到我们应得的喜欢,尊重和资金,因为我们没有充分地衡量一个黄金概念:成果.因为我们 ...
《Linux内核设计与实现》读书笔记第五章系统调用
第五章系统调用系统调用是用户进程与内核进行交互的接口.为了保护系统稳定可靠,避免应用程序恣意忘形. 5．1与内核通信系统调用在用户空间进程和硬件设备间添加了一个中间层, 作用:为用户空间提供了一种 ...
Java语言程序设计(基础篇) 第五章循环
第五章循环 5.2 while循环 1.while循环的语法如下: while(循环继续条件){ //循环体语句(组); } 2.程序:提示用户为两个个位数相加的问题给出答案 package co ...
读《编写可维护的JavaScript》第五章总结
第五章 UI层的松耦合 5.1 什么是松耦合在Web开发中,用户界面是由三个彼此隔离又相互作用的层定义的: HTML是用来定义页面的数据和语义 CSS用来给页面添加样式 JavaScript用来给页 ...
《Linux内核设计与实现》课本第五章学习笔记——20135203齐岳
<Linux内核设计与实现>课本第五章学习笔记 By20135203齐岳与内核通信用户空间进程和硬件设备之间通过系统调用来交互,其主要作用有三个. 为用户空间提供了硬件的抽象接口. 保 ...
Android深度探索--HAL与驱动开发----第五章读书笔记
第五章主要学习了搭建S3C6410开发板的测试环境.首先要了解到S3C6410是一款低功耗.高性价比的RISC处理器它是基于ARMI1内核,广泛应用于移动电话和通用处理等领域. 开发板从技术上说与我们 ...
《java编程思想》读书笔记（一）开篇&amp&semi;第五章(1)
2017 ---新篇章今天终于找到阅读<java编程思想>这本书方法了,表示打开了一个新世界. 第一章:对象导论内容不多但也有20页,主要是对整本书的一个概括.因为已经有过完整JAV ...
python学习心得第五章
python学习心得第五章 1.冒泡排序: 冒泡是一种基础的算法,通过这算法可以将一堆值进行有效的排列,可以是从大到小,可以从小到大,条件是任意给出的. 冒泡的原理: 将需要比较的数(n个)有序的两个 ...

随机推荐

【LeetCode OJ】Binary Tree Maximum Path Sum
Problem Link: http://oj.leetcode.com/problems/binary-tree-maximum-path-sum/ For any path P in a bina ...
分区的4k对齐
4k对齐的原理 4k对齐的磁盘性能比非对齐的大致提升在5%-10%左右. fdisk -H 224 -S 56 /dev/sdx #创建分区 fdisk -lu /dev/sdx #验证对齐
Capacity Scheduler 队列设置
先附一个官网地址 Capacity Scheduler是YARN中默认的资源调度器. 相关参数配置: 资源分配相关参数 ``` (1) capacity:队列的资源容量(百分比). 当系统非常繁忙时, ...
MarkdownPad 破解学习
最近学习 Markdown,从网上下载了 Windows 下的编辑器:MarkdownPad.这款软件分为免费版和专业版(收费), 对于普通用户来说免费版已经足够,专业版比免费版多了如下几个功能: 一 ...
segment
1.segmentedControlStyle 设置segment的显示样式. typedef NS_ENUM(NSInteger, UISegmentedControlStyle) { UISegm ...
java之基础数据类型学习————（一）
JAVA数据类型: 总结来说,java的基本数据类型分为四类八种 • 第一类:整数类型:byte.short.int.long • 第二类:浮点型:float.double • 第三类:字符类型:c ...
小白的Python之路 day2 列表、元组操作
1. 列表.元组操作列表是我们最以后最常用的数据类型之一,通过列表可以对数据实现最方便的存储.修改等操作定义列表 1 names = ['Tom','Jack','Qian'] 通过下标访问列表中 ...
PyCharm安装Pygame方法
最近在自学Python,然后终于到了项目实战的时候了,而且还是做一个游戏,热情直接被调动起来了,嘿嘿首先要安装一个Pygame 环境 win7 先去这里下载对应Python的Pygame版本如 ...
pip install cv2报错
pip install cv2 安装cv2报错: Could not find a version that satisfies the requirement cv2 (from versions: ...
C&num;调用C++导出类的一个实例
一直认为带导出类dll的只有VC自己可以调用,其它编程语言无法调用,今天看到一篇文章才知道自己错了.https://blog.csdn.net/huiyouyongdeyu2011/article/d ...