Web-Day1笔记
一、网页开发基础知识
网页文件：使用html的标记语言书写的文本文件，它可以在浏览器中按照设计者设计的样式呈现，书写一个网页文件，使用文本文档完成，HBuilder，Dreamweaver等
网页主要由三部分组成【掌握】： 结构：网页的结构和内容【一个网页包括标题，正文，列表，图片等】-----》html
表现：设定网页的呈现样式【字体，字号，颜色，标签的位置等】-----》css
行为：控制网页的行为【网页可以动态变化,可以和用户进行交互】----》javascript
总结：结构决定了网页是什么，表现决定了网页是什么样子，行为决定网页能做什么
其中：最开始html可以同时承担结构和表现的任务
二、html简介
1.概念
html:HyperText Markup Language,超文本标记语言，是最基础的网页语言，是解释性和编译型语言
超文本：超出文本的范畴【在记事本中无法文字的间距，颜色，大小等】
标记：html中所有的操作都是通过标记完成的，标记就是一个标签【元素】
h5:html5,html的最新版本
2.html程序
这是<font size="5" color="blue">第一个font>html程序说明：font被称为标签【元素】，size和color被称为该标签的属性
html程序的后缀：.html或者.htm
3.html的规范
a.一个html文件都包含html开始标签和结束标签
b.html标签包含两部分内容
head标签：用来设置html页面的配置信息和属性
body标签：显示在网页上的内容
c.head标签包含其他的标签
title标签：设置当前网页的标题
meta标签：设置当前页面的编码格式，一般使用utf-8
d.一般的标签都有开始标签和结束标签，但是，有的标签只有开始标签
比如：meta,br【换行】,hr【水平线】
e.标签不区分大小写，一般书写为小写
<html> <head> <meta charset="utf-8" /> <title> 百度一下，你就知道 title> head> <body> 今天学习html标签 body> html>
4.html操作的思想
网页中很多不同的数据，不同的数据可能需要不同的显示方式，这时需要使用标签将需要操作的数据【封装：开始标签和结束标签】起来，通过修改标签的属性实现标签的样式改变
一个标签相当于一个容器，想要修改容器内数据的样式，只需要修改容器的属性
三、html常用标签
1.文字标签和段落标签
font:
size:文字的大小，取值范围为1~7，注意：数值越大，字号越大，数值超过7则显示的是7的大小
color:文字的颜色
表示1：简单的英文单词【red,green,blue…】
表示2：使用十六进制表示【#123456,每两位代表一种颜色，分别表示RGB】
#ffffff代表白色，#000000代表黑色
表示3：rgb() 或者 rgba()
rgb(r,g,b),r,g,b取值范围为0~255
rgba()，a表示透明度，取值范围为0~1
<html> <head> <meta charset="UTF-8"> <title>title> head> <body> <font size="4" color="lightskyblue">这是文字标签的演示font> <br /> <font size="4" color="#ff45aa">这是文字标签的演示font> <br /> <s>文字标签s> <del>文字标签del> <b>文字标签b> <strong>文字标签strong> <i>文字标签i> <em>文字标签em> <u>文字标签u> <ins>文字标签ins> 2<sup>5sup> log<sub>2sub> body> html>p
注意：如果在html中要设置段落中的内容，一般通过嵌套font标签实现
p标签默认会自动换行
<html> <head> <meta charset="UTF-8"> <title>title> head> <body> <p><font size="5" color="green">贾font>乃亮与李小璐是在某个饭局上认识，随后他就对女方一见钟情，锲而不舍展开疯狂追求。 李小璐曾在某访谈节目中透露，当时贾乃亮为了追求自己，还特别去打了一串与自己一样的耳洞， 而且感染化脓，就只是为了引起她的注意，还有一次是李小璐发烧生病， 贾乃亮衣不解带的守在身边照顾了5天5夜，连头都来不及洗， 就是一直陪在自己身边。但是这也没让李小璐接受对方的追求， 直到快1年了，有一次她看到贾乃亮喝醉，在自己面前委屈痛哭， 才惊觉对方是对自己是认真的，才点头同意交往 p> <p style="height: 100px;background-color: cyan;">11111p> <p>11111p> <p>11111p> <p><font size="4" color="darkgray">望庐山瀑布font>p> <p><font size="2" color="lightseagreen">望庐山瀑布，font>p> <p><font size="2" color="lightseagreen">望庐山瀑布，font>p> <p><font size="2" color="lightseagreen">望庐山瀑布，font>p> <p><font size="2" color="lightseagreen">望庐山瀑布，font>p> <p style="color: rgb(23,40,18);font-size: 30px;">望庐山瀑布p> <p style="color: rgb(46,0,200);font-size: 16px;">望庐山瀑布,p> body> html>
2.标题标签、水平线标签、换行标签
hn:n的取值范围为1~6，数值越大，标题的字号越小
注意：标题标签默认会自动换行，字体加粗
<html> <head> <meta charset="UTF-8"> <title>title> head> <body> <h1>望庐山瀑布h1> <h2>望庐山瀑布h2> <h3>望庐山瀑布h3> <h4>望庐山瀑布h4> <h5>望庐山瀑布h5> <h6>望庐山瀑布h6> <font>4672364font> <br /> <font>fahwjghjfont> <hr size="3" color="red" /> body> html>
3.字符实体
<html> <head> <meta charset="UTF-8"> <title>title> head> <body> <html>是一个网页的开始 一个网页 的开始 3×2=6 6÷3=2 body> html>
4.图片标签
img
属性：
src:图片的路径
网络资源：直接赋值网址即可
本地资源：资源一般在当前工程下，一般放置工程下的img文件夹，注意图片的相对路径
width:设置图片的宽度
height:设置图片的高度
注意：如果不设置图片的宽高，默认显示的是图片本来的大小
alt:图片的替换文本，如果图片资源不存在的时候，则显示该文本
title:鼠标悬浮标题，只有当鼠标移动到图片上方的时候才会显示该标题
<html> <head> <meta charset="UTF-8"> <title>title> head> <body> <img src="img/背景1.jpg" width="200px" height="200px" /> <img src="img/背景1.jpg" width="50%" height="50%" /> <br /> <img src="img/背景2.jpg" width="200px" height="200px" alt="图片资源" /> <img src="img/背景1.jpg" width="200px" height="200px" title="背景图片" /> body> html>
路径
<html> <head> <meta charset="UTF-8"> <title>title> head> <body> <img src="背景1.jpg" /> <img src="img/背景2.jpg" /> body> html><html> <head> <meta charset="UTF-8"> <title>title> head> <body> <img src="../背景1.jpg" /> <img src="../img/背景1.jpg" /> body> html>
5.音视频标签
html5新增的特性
音频：audio
视频：video
autoplay:自动播放
controls：进度条
loop：循环
<html> <head> <meta charset="UTF-8"> <title>title> head> <body> <video src="img/MovieTest.mp4" autoplay controls loop>video> body> html>
6.超链接标签
a
属性：
href:类似于图片中的src，表示需要链接到的路径
网络地址
本地html文件，一般使用相对路径，路径的使用和图片的使用相同的
target:设置打开的方式，默认在当前窗口中打开
_self:在当前窗口中打开
_blank:打开一个新的窗口
注意：a默认不会自动换行
<html> <head> <meta charset="UTF-8"> <title>title> head> <body> <a href="http://www.baidu.com" target="_blank">按钮一a> <a href="http://www.baidu.com" target="_self">按钮二a> <a href="2.段落标签的使用.html">按钮三a> <a href="http://www.baidu.com"> <img src="背景1.jpg" width="50px" height="50px" /> a> <br /> <a href="#">点我点我a> <a href="javascript:void(0)">点我点我~~~a> <a href="javascript:void(0)" onclick="alert('hello')">点我点我~~~a> body> html>
6.1定位资源：回到顶部
<a href="#top">回到顶部a>
6.2定位资源：跳转到指定的段落
<html> <head> <meta charset="UTF-8"> <title>title> head> <body> <a href="pageInfo.html#p1">第一个段落a> <a href="pageInfo.html#p2">第二个段落a> <a href="pageInfo.html#p3">第三个段落a> <a href="pageInfo.html#p4">第四个段落a> body> html><html> <head> <meta charset="UTF-8"> <title>title> head> <body> <p id="p1" style="height: 1000px;background-color: red;">p> <p id="p2" style="height: 1000px;background-color: gray;">p> <p id="p3" style="height: 1000px;background-color: blue;">p> <p id="p4" style="height: 1000px;background-color: cyan;">p> body> html>
7.块标签
div:会自动换行，使用场景：主要用于网页的划分
注意：可以在div的内部嵌套任意的标签
span：不会自动换行，使用场景：输入框输入内容的提示或者校验
8.列表标签
a.自定义列表【解释型列表】 了解
dl:父标签，列表的范围
dt：子标签，上层内容
dd：子标签，下层内容
b.有序列表
ol：父标签，列表的范围
li:子标签，具体的内容
属性：type:设置排序方式，默认为1，可以设置为a【A】或者i【I】
c.无序列表
ul:父标签，列表的范围
li:子标签，具体的内容
属性：type：设置表示样式，circle空心圆，disc实心圆，square方框，默认为disc
<html> <head> <meta charset="UTF-8"> <title>title> head> <body> <dl> <dt>千锋教育dt> <dd>行政部dd> <dd>人事部dd> <dd>运营部dd> dl> <ol type="I"> <li>行政部li> <li>行政部li> <li>行政部li> <li>行政部li> ol> <ol start="c" type="a"> <li>行政部li> <li>行政部li> <li>行政部li> <li>行政部li> <li>行政部li> <li>行政部li> ol> <ul type="square"> <li>行政部li> <li>行政部li> <li>行政部li> <li>行政部li> <li>行政部li> <li>行政部li> ul> body> html>