<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="./reset.css"> <style> /**{ padding: 0; margin: 0; } ul{ list-style: none; } a{ text-decoration: none; }*/ .box{ /*width: 420px;*/ height: 50px; background-color: purple; } .box ul{ /*width: 100%;*/ height: 50px; } .box ul li{ /*浮动的标签不区分块还是行内标签,浮动的标签可以任意的设置宽高*/ /*background-color: red;*/ float: left; /*width: 70px;*/ height: 50px; /*像一些字体属性是可以继承下来: text-*,color,font-**/ font-size: 14px; color: green; /*文本水平居中*/ text-align: center; /*盒子水平居中,第一个0是上下方向,第二个auto是左右方向*/ /*margin: 0 auto;*/ /*行高 == 盒子的高度 实现文本垂直居中*/ line-height: 50px; margin: 0 10px; /*cursor: pointer;*/ } .box ul li a{ color: green; height: 50px; display: block; } </style> </head> <body> <div class="box"> <ul> <li> <span>秒杀啊啥的当</span> </li> <li> <a href="#"> 优惠券抠脚大汉就看得见肯定会 </a> </li> <li> <a href="#"> PLUS会员 </a> </li> <li> <a href="#"> 闪购 </a> </li> <li> <a href="#"> 拍卖 </a> </li> <li> <a href="#"> 京东服饰 </a> </li> </ul> </div> <!-- <audio src="./Deadmau5 - Battle 3.mp3" controls></audio> --> </body> </html>
盒子的水平居中
浮动的标签不区分块还是行内标签,浮动的标签可以任意的设置宽高
一、字体标签
<!-- 凡是使用p 它一定包含的是字体的标签 h1~h6 a font img -->
<!-- p里面不能放p -->
字体标签包含：h1~h6、<font>、<u>、<b>、<strong><em>、<sup>、<sub>
标题
标题使用<h1>至<h6>标签进行定义。<h1>定义最大的标题，<h6>定义最小的标题。具有align属性，属性值可以是：left、center、right。
每个标题独占一行,还有宽度跟高度大写,单位是px,
段落标签:<p></p>,在页面显示,自动换行,当内容多的时候,还会有滚动条,
<!--段落标签--> <p>中国汉朝初年的《尔雅》，是中国百科全书性质著作的渊源；</p> <p>古希腊学者亚里士多德编写过的全面讲述当时学问的讲义，则被西方奉为“百科全书之父”。</p>
字体标签<font>(已废弃)
-
color="红色"或color="#ff00cc"或color="new rgb(0,0,255)"：设置字体颜色。设置方式：单词 #ff00cc rgb(0,0,255)
-
size：设置字体大小。 取值范围只能是：1至7。取值时，如果取值大于7那就按照7来算，如果取值小于1那就按照1来算。如果想要更大的字体，那就只能通过css样式来解决 -
face="微软雅黑"：设置字体类型。注意在写字体时，“微软雅黑”这个字不能写错。
超链接:
a标签,锚点,超链接,
在一行内显示,不能设置宽高,默认是宽高的字体的大小,行内标签.
可以设置字体的大小,
text-decoration:none(没有下划线)
text-decoration:underline(有下划线)
a标签还可以设置style,
<a href="#" style="color:red;">文本内容</a>
cursor:pointer,设置属性,添加游标(指针变小手标记)
</body> </html> <!DOCTYPE html> <html> <head> <title>箭头变手</title> </head> <body> <p style=\'cursor :pointer;\'>设置鼠标箭头变为手</p> </body> </html>
1,外部链接:链接到外部文件,
<a href="new.html">点击进入到新网页</a>
<a href="https://music.163.com">网易云音乐</a>
<a href="http://www.baidu.com" target="_blank">进入百度</a>
这样是在原来的网页跳转的,不是新打开一个网页,中间写的"百度一下"就是在网页上显示的,可以点的.
a是英语anchor“锚”的意思，就好像这个页面往另一个页面扔出了一个锚。是一个文本级的标签。
href是英语hypertext reference超文本地址的缩写
2、锚链接：
指给超链接起一个名字，作用是在本页面或者其他页面的的不同位置进行跳转。比如说，在网页底部有一个向上箭头，点击箭头后回到顶部，这个就是利用到了锚链接。首先需要创建一个锚点.
<p id="top">跳到这里****</p> <a href="#top">跳转顶部</a>
注意:不一定非要跳转到顶部,第一行设置到哪里,点击下面跳转,就跳到哪里.
注意#号一定不能丢,表示跳到名为top的特定位置，这是规定。如果少了#号，点击之后，就会跳到top这个文件或者top这个文件夹中去。
如果没有设置为<a href="new.html#top">回到顶部</a>,就表示点击之后,跳转到new.html页面的top锚点中了.
3、邮件链接：
代码举例：
<a href="mailto:zhaoxu@tedu.cn">联系我们</a>
效果：点击之后，会弹出outlook，作用不大。
前提：计算机中必须安装邮件客户端，并且配置好了邮件相关信息
特殊几个链接：
返回页面顶部的位置,不用事先在上面设置,直接设置下面一行就可以,
<a href="#">跳转到顶部</a>
与js有关：
<a href="javascript:alert(1)">内容</a> <a href="javascript:;">内容</a>
- javascript:;表示什么都不执行，这样点击
<a>时就没有任何反应 例如：<a href="javascrip:;">内容</2 - javascript:是表示在触发
<a>默认动作时，执行一段JavaScript代码。 例如：<ahref="javascript:alert()">内容</a>
超链接的属性
href：目标URL-
title：悬停文本。 -
name：主要用于设置一个锚点的名称。 -
target：告诉浏览器用什么方式来打开目标页面。target属性有以下几个值：-
_self：在同一个网页中显示（默认值） -
_blank：在新的窗口中打开。 -
_parent：在父窗口中显示 -
_top：在顶级窗口中显示
-
blank就是“空白”的意思，就表示新建一个空白窗口。为啥有一个_ ，就是规定，
也就是说，如果不写target=”_blank”那么就是在相同的标签页打开，如果写了target=”_blank”，就是在新的空白标签页中打开。
另类的一个,就是取消超链接,
阻止a标签的默认事件.
<a href=\'javascript:void(0)\'>百度一下</a>
点击就不会再跳转了.
弹出框的设置
<a href=\'javascript:alert(11);\'>百度一下</a>
设置console.log,在页面按F12,然后查看console,就会查看到log括号里的内容.
<a href=\'javascript:console.log(11);\'>查看console </a>
a是一个文本级的标签
比如一个段落中的所有文字都能够被点击，那么应该是p包含a；
<p>
<a href="">段落段落段落段落段落段落</a>
</p>
而不是a包裹p：
<a href="">
<p>
段落段落段落段落段落段落
</p>
</a>
a的语义要小于p，a就是可以当做文本来处理，所以p里面相当于放的就是纯文字。
排版
块级标签 <div>和<span>
div和span是非常重要的标签，div的语义是division“分割”； span的语义就是span“范围、跨度”。
div标签的属性:
-
align="属性值"：设置块儿的位置。属性值可选择：left、right、 center
<span>和<div>唯一的区别在于：<span>是不换行的，而<div>是换行的。
如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的。或者说，DIV+CSS来实现各种样式。
div在浏览器中，默认是不会增加任何的效果的，但是语义变了，div中的所有元素是一个小区域。
div标签是一个容器级标签，里面什么都能放，甚至可以放div自己。
span也是表达“小区域、小跨度”的标签，但是是一个文本级的标签。
就是说，span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。
例子:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>div+span</title> </head> <body> <div id=\'header\' style=\'height:80px;background-color:blue;\'>头部-header </div> <div id=\'wrap\' style=\'height:200px;background-color: yellow;\'>body部分</div> <div id=\'foot\' style=\'height:30px;background-color: red;\'>尾部</div> </body> </html>
div标签负责布局，负责结构，负责分块。css负责样式。
比较不同的用法,
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>div+span</title> <!-- 标签选择器 --> <style type="text/css"> div{ background-color: red; } </style> </head> <body> <div>第一部分</div> <div>第二部分</div> <div>第三部分</div> <!-- <div id=\'header\' style=\'height:80px;background-color:blue;\'>头部-header </div> <div id=\'wrap\' style=\'height:200px;background-color: yellow;\'>body部分</div> <div id=\'foot\' style=\'height:30px;background-color: red;\'>尾部</div> --> </body> </html>
设置边角正方形为弧形;
border-radius: 5px;
注意,有单位.
<!DOCTYPE html> <html> <head> <title>练习div</title> <style type="text/css" > #head{ background-color: red; /*宽度可以不写,默认100%*/ height: 90px; /*设置边角,正方形为弧形*/ border-radius: 5px; } #body{ background-color: blue; height: 300px; border-radius: 10px; } #foot{ background: green; height: 100px; border-radius: 6px; } </style> </head> <body> <div id=\'head\'>head</div> <div id=\'body\'>body</div> <div id=\'foot\'>foot</div> </body> </html>
浏览器默认字体大小16,并且浏览器的字体大写都是偶数的(不是规定,多数都是偶数的)
margin为边距,
后面的设置可能会覆盖前面的设置(比如文字的颜色设置)
换行<br>及<hr>的使用,<br>是单闭合标签
<!DOCTYPE html> <html> <head> <title></title> <style> .a{ background: red; height: 120px; } .b{ background-color: blue; height: 300px; } .c{ background-color: yellow; height: 150px; } </style> </head> <body> <div class=\'a\'>第一部分</div> <!-- br是换行的,单闭合标签 --> <br> <hr> <br> <div class=\'b\'>第二部分</div> <!-- hr是分割线 --> <hr> <div class=\'c\'>第三部分</div> </body> </html>
标签 <pre></pre>的使用,保持文本的格式,
<div class=\'b\'>第二部分 <pre> 就现在这样输出, 没有一点理由可言 不要改变文本的输出样式 </pre>
图片标签 <img />
img: 代表的就是一张图片。是单边标记。
img是自封闭标签，也称为单标签。
能插入的图片类型：
-
能够插入的图片类型是：jpg(jpeg)、gif、png、bmp。
-
不能往网页中插入的图片格式是：psd、ai
HTML页面不是直接插入图片，而是插入图片的引用地址，所以也要把图片上传到服务器上。
src属性：图片的相对路径和绝对路径
这里涉及到图片的一个属性：
-
src属性：指图片的路径。
在写图片的路径时，有两种写法：相对路径、绝对路径
1、写法一：相对路径
相对当前页面所在的路径。两个标记 . 和 .. 分表代表当前目录和父路径。
举例1：
<!-- 当前目录中的图片 --> <img src="2.jpg"> <img src=".\2.jpg"> <!-- 上一级目录中的图片 --> <img src="..\2.jpg">
img 是image“图片”的简写，src 是英语source“资源”的缩写。
举例2：
<img src="images/1.jpg">
上方代码的意思是说，当前页面有一个并列的文件夹images，在文件夹images中存放了一张图片1.jpg
2、写法二：绝对路径
（1）以盘符开始的绝对路径。举例：
<img src="C:\Users\aaa\Desktop\html-01\images\1.jpg">
（2）网络路径。举例：
<img src="http://www.baidu.com/2016040102.jpg">
相对路径和绝对路径的总结
相对路径的好处：站点不管拷贝到哪里，文件和图片的相对路径关系都是不变的。
相对路径使用有一个前提，就是网页文件和你的图片，必须在一个服务器上。
问题：我的网页在C盘，图片却在D盘，能不能插入呢？
答案： 用相对路径不能，用绝对路径也不能。
注意：可以使用file://来插入，但是这种方法，没有任何意义！因为服务器上没有所谓c盘、d盘。
下面的方法是行的，但是没有任何工程上的意义，这是因为服务器没有盘符，linux系统没有盘符：
<img src="file://C:\Users\Danny\Pictures\明星\1.jpg" alt="" />
总结一下：
-
我们现在无论是在a标签、img标签，如果要用路径。只有两种路径能用，就是相对路径和绝对路径。
-
相对路径，就是../ image/ 这种路径。从自己出发，找到别人；
-
绝对路径，就是http://开头的路径。
-
绝对不允许使用file://开头的东西，这个是完全错误的！
src,title,alt,的使用
title的使用可以显示悬浮字
<!DOCTYPE html> <html> <head> <title>这是titel</title> </head> <body> <div>head <br> <hr> <!-- 可以设置图片的宽度(等比例缩放,不会失真,设置宽度的话,可能会失真), --> <img src=\'./123.png\' width="200" height="200" alt=\'图片出来不时进行提示\' title=\'悬浮显示的文字\'> <!-- 可以链接网络上的图片 --> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1533640533065&di=26bd44d90290b1e6fcedb3fd83c00419&imgtype=0&src=http%3A%2F%2Fpic2.zhimg.com%2Fv2-3efa478d973dbaa2d8c4f098cf107724_1200x500.jpg" </div> </body> </html>
body标签中相关标签
ul,ol,dl,
一、列表标签
列表标签分为三种。
1、无序列表<ul>，无序列表中的每一项是<li>
英文单词解释如下：
- ul：unordered list，“无序列表”的意思。
- li：list item，“列表项”的意思。
有个语法叫div.aside然后tab键,自动补全,<div class="aside"></div>
<!DOCTYPE html> <html> <head> <title>练习列表</title> </head> <body> <li>list1</li> <li>list2</li> <li>list3</li> <li>list4</li> <li>list5</li> </body> </html>
注意：
- li不能单独存在，必须包裹在ul里面；反过来说，ul的“儿子”不能是别的东西，只能有li。
- 我们这里再次强调，ul的作用，并不是给文字增加小圆点的，而是增加无序列表的“语义”的。
属性：
-
type="属性值"。属性值可以选：disc(实心原点，默认)，square(实心方点)，circle(空心圆)。
<!DOCTYPE html> <html> <head> <meta charset=\'utf8\'> <title>练习列表</title> <style type="text/css"> /*通配符表示去掉所有ul里的大括号里的东西去,去掉边看跟填充,*/ *{ /*margin:0; padding:0;*/ } /*这样可以保证只去掉实心点,边框跟填充还在.*/ .a{ /*list-style: none;*/ } </style> </head> <body> <div id=\'wrap\'> <div class="aside"> <!-- 此处type类型,改变实心点或者空心圆等等--> <ul type=\'square\'> <!-- 用ul的时候,只能用li --> <li> <a href="http://www.baidu.com" target="_blank"> <img src="./123.png" width="100" height="50" style=\'cursor :pointer;\'> 点击进入 </a> </li> <li>电话</li> <li>互联网</li> <li>支付宝</li> </ul> <!-- 此处type所给的值就是序列的顺序 --> <ol type=\'10\'> <li>手机</li> <li>电话</li> <li>互联网</li> <li>支付宝</li> </ol> </div> </div> </body> </html>
列表之间是可以嵌套的
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <ul> <li><b>北京市</b> <ul> <li>海淀区</li> <li>丰台区</li> <li>昌平区</li> </ul> </li> <li><b>河北省</b> <ul> <li>保定市</li> <li>邢台市</li> <li>石家庄</li> </ul> </li> </ul> </body> </html>
注意：ul的儿子，只能是li。但是li是一个容器级标签，li里面什么都能放。甚至可以再放一个ul。
2,有序列表(OL),里面的每一项是<li>
英文单词：Ordered List。
属性：
-
type="属性值"。属性值可以是：1(阿拉伯数字，默认)、a、A、i、I。结合start属性表示从几开始。
和无序列表一样，有序列表也是可以嵌套的，
ol和ul就是语义不一样，怎么使用都是一样的。
ol里面只能有li，li必须被ol包裹。li是容器级。
ol不常用,一般常用ul。举例如下：
<ul> <li>1. 嘿哈</li> <li>2. 哼哈</li> <li>3. 呵呵</li>
<ul>
3,定义列表
定义列表非常有用
<dl>英文单词：definition list，没有属性。dl的子元素只能是dt和dd。
-
<dt>：definition title 列表的标题，这个标签是必须的 -
<dd>：definition description 列表的列表项，如果不需要它，可以不加
备注：dt、dd只能在dl里面；dl里面只能有dt、dd。
<!DOCTYPE html> <html> <head> <title>0807</title> </head> <body> <dl> <dt>第一条规则</dt> <dd>不准迟到</dd> <dd>不准睡觉</dd> </dl> </body> </html>
通过页面显示,定义列表的语义是两层,
- （1）是一个列表，列出了几个dd项目
- （2）每一个词儿都有自己的描述项。
备注:dd是描述dt的,
一个dt配很多dd
<!DOCTYPE html> <html> <head> <title>0807</title> </head> <body> <dl> <dt>北京</dt> <dd>国家首都，政治文化中心</dd> <dd>污染很严重，PM2.0天天报表</dd> <dt>上海</dt> <dd>魔都，有外滩、东方明珠塔、黄浦江</dd> <dt>广州</dt> <dd>中国南大门，有珠江、小蛮腰</dd> </dl> </body> </html>
一个dl里面只有一个dt和dd
<!DOCTYPE html> <html> <head> <title>0807</title> </head> <body> <dl> <dt>北京</dt> <dd>国家首都，政治文化中心</dd> </dl> <dl> <dt>上海</dt> <dd>魔都，有外滩、东方明珠塔、黄浦江</dd> </dl> <dl> <dt>广州</dt> <dd>中国南大门，有珠江、小蛮腰</dd> </dl> </body> </html>
dt、dd都是容器级标签，想放什么都可以。所以，现在就应该更加清晰的知道：用什么标签，不是根据样子来决定，而是语义（语义本质上是结构）。
鼠标悬浮文字变颜色,
<!DOCTYPE html> <html> <head> <title>0807</title> <style type="text/css"> #t:hover{ color: red; } </style> </head> <body> <dl> <dt>北京</dt> <dd>国家首都，政治文化中心</dd> <dd> <a href="#" id=\'t\'> <dd>污染很严重，PM2.0天天报表</dd></a> </dd> </dl> </body> </html>
保存网页图片的方法:
1,网页-右键-网页另存为;
2,网页-按F12键-点左边第一个箭头-点图片-看到src链接的内容-source-
然后在source里面找,有的背景图片,给出了url,直接添加http://,可尝试拿到图片的链接.
前端工程师+ios+安卓 必会后台(php nodejs)
后端工程:
python(必会前端 公司的后台管理系统) java php go.... linux操作系统
运维工程师:
自动化运维 python
不会前端的UI不是好UI
不会后端的前端不是好前端
不会前端和运维的不是好后端
<!DOCTYPE html><html><head><title>练习列表</title></head><body><li>list1</li><li>list2</li><li>list3</li><li>list4</li><li>list5</li>
</body></html>