1、什么是HTML?
HTML的全称为超文本标记语言(Hyper Text Markup Language),是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。
HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言,它是标准通用化标记语言SGML的应用。使用HTML,将所需要表达的信息按某种规则写成HTML文件,通过专用的浏览器来识别,并将这些HTML文件“翻译”成可以识别的信息,即我们所见到的网页。
2、编辑工具
基本文本、文档编辑软件:使用微软自带的记事本或写字板都可以编写,当然,如果你用WPS或Word来编写也可以,不过保存时请使用.htm或.html作为扩展名,这样就方便浏览器认出直接解释执行了。
半所见即所得软件,如:FCK-Editer、E-webediter等在线网页编辑器;Sublime Text代码编辑器(由Jon Skinner开发,Sublime Text2收费但可以无限期试用)。
所见即所得软件,使用最广泛的编辑器,完全可以一点不懂HTML的知识就可以做出网页,如:AMAYA(出品单位:万维网联盟);FRONTPAGE(出品单位:微软);Dreamweaver(出品单位Adobe)。Microsoft Visual Studio(出品公司:微软;目前使用):其中所见即所得软件与半所见即所得的软件相比,开发速度更快,效率更高,且直观的表现更强。任何地方进行修改只需要刷新即可显示。缺点是生成的代码结构复杂,不利于大型网站的多人协作和精准定位等高级功能的实现。
3、基本框架:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
标记符<html>:说明该文件是用超文本标记语言来描述的,它是文件的开头,而</html>则表示该文件的结尾,它们是超文本标记语言文件的开始标记和结尾标记。(lang(uage)=”en(glish)”)
<head></head>:这2个标记符分别表示头部信息的开始和结尾。头部中包含的标记是页面的标题、序言、说明等内容,它本身不作为内容来显示,但影响网页显示的效果。
主题内容:
<body></body>;,网页中显示的实际内容均包含在这2个正文标记符之间。正文标记符又称为实体标记。
网页中几乎所有的内容都写在了body中。同时,为了满足开发人员的需求,我们还可以在body中写入很多的标签来帮助我们的开发,常见的有:
<div></div>: 一个容器,里面可以装很多的东西
代码:这里相当于是最简单的一个html页面了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>1234</div>
</body>
</html>
界面:
我们可以看到,在左上角显示出了‘1234’,这正是我们在代码中写的东西。
4、标签:
构成:由一对尖括号<>和标签名构成,分为起始标签和结束标签两种,两者的标签名相同,只是结束标签的多加了‘/’,同时需要注意,有些标签是可以不需要加结束标签的。
常用标签:
<title></title>: 网页名称
<link></link>&<style></style>:常用于CSS
script标签:脚本编写
meta标签:元信息
div&span标签:用于布局,是没有语义的;
标题标签:<h1></h1>,此外还有其余的2~6级的标题,从1~6,标题中字体的大小依次减小;
段落标签:<p></p>,顾名思义,这个标签里面放的是一段文字;
换行标签:<br>;
由于接下来的标签很多都会涉及到标签属性,所以说明一下什么是标签属性。
标签属性:
1、标签可以有多个属性,必须写在标签中,而且在标签名后面
2、属性可以不分顺序,其中标签名和属性之间最好分开,属性之间最好分开
3、任何标签都有默认值,省略该属性则取默认值
图像标签:<img>,有src,alt,title这几个常用属性,src:代表图片存储的路径,可以使绝对路径,也可以是相对路径;alt:引入图片时可能会出现图片路径错误等情况,而导致图片无法加载出来,所以当图片无法加载出来时就会显示出alt中的内容;title:图片显示出来时,将光标放在放在图片上,就显示出title中的内容。(../images代表images文件夹的上一级文件夹;images/pic.png表示images文件夹下的图片;first.html表示访问同一级的文件或者文件夹),例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
1、图片的基本插入方式 <br>
<img src="Picture3.png" /> <br>
2、带有alt的图片 <br>
<img src="Picture2.png" alt="1" /> <br>
3、带有title的图像
<img src="Picture3.png" title="2" /> <br>
4、设置图片的长度和宽度,只需要设置一个即可,会等比例缩放 <br>
<img src="Picture3.png" title="2" width="900"> <br>
5、带有边框的图像 <br>
<img src="Picture3.png" title="2" width="900" border="10"> <br>
</body>
</html>
链接标签:<a></a>,有href和target两个常用属性,href:代表想要跳转的地址,可以是一个网址,也可以是一个本机地址,当属性值为‘#’时,代表还没有确定链接目标;target属性中可选’_blank’,’_self’等,选中’_blank’则表示将跳转的窗口以新窗口展示出来,‘_self’则表示在当前窗口展示出来,例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>跳转——外部标签</h3>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.sina.com.cn" target="_blank">新浪</a>
<h3>跳转——内部标签</h3>
<a href="我的html.html">今日新闻</a>
<h3>没有确定的链接目标时</h3>
<a href="#">我的作品</a>
</body>
</html>
特殊标签: ——空格,<——‘<’,>——‘>’
列表标签:<ul><li></li></ul>,无序列表
<ol><li></li></ol>,有序列表
注意:,ul标签中只能放li标签,但是li标签中还可以放入其他的标签,ol标签同理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>My favorite fruit:</h3>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Watermalen</li>
<li>Pear</li>
<li>Orange</li>
<li>
<h3>水果蔬菜</h3>
<p>西红柿</p>
</li>
</ul>
<ul>标签中只能放<li>标签,但是<li>标签中可以放其他的标签
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ol>
<li>美国</li>
<li>英国</li>
<li>中国</li>
<li>俄罗斯</li>
</ol>
</body>
</html>
自定义列表:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<dl>
<dt>四川省</dt> <!--名词-->
<dd>成都市</dd> <!--解释说明-->
</dl>
</body>
</html>
表格:
属性:cellspacing,cellpadding……
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--有行的定义,但是没有列的定义,只有单元格的定义-->
<table width="500" height="300" border="1" cellspacing="0" cellpadding="0" align="center">
<!--单元格和边框之间的距离-->
<!--单元格内容和单元格边框之间距离-->
<!--管理对齐,有左对齐,右对齐和居中对齐;分别用对应单词表示代表-->
<caption>人物信息</caption>
<thead>
<!--头部分-->
<tr>
<!--行-->
<th>姓名</th>
<!--单元格,单元格和<li>类似,其中可以嵌套很多的东西,但是table中只能嵌套<tr>标签,和《dl》是一样的-->
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<!--身体部分-->
<tr>
<td>名字1</td>
<td>女</td>
<td>18</td>
</tr>
<tr>
<td>名字2</td>
<td>男</td>
<td>20</td>
</tr>
</tbody>
</table>
</body>
</html>
Input标签:<input></input>,
属性:type,可选值:
‘text’:文本框,
‘password’:密码框,
‘radio’:单选框
‘checkbox’:多选框,使用和单选框类似
‘button’:普通按钮
‘submit’:提交按钮
‘reset’:重置表单
‘image’:图像标签,使用与之前的img标签类似,
‘file’:提交文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- <input/> -->
用户名:<input type = "text" value="用户名"/> <!-- 文本框 --> <br>
密 码:<input type= "password" maxlength="10"/> <!--密码框--> <br>
性别:<input type= "radio" name = "sex" checked = "checked"/> 女 <!--默认选中-->
<input type="radio" name = "sex">男 <br>
<!--一组单选框,通过相同的name值实现单选-->
爱好:<input type="checkbox" name = "hobby" checked = "checked"> 羽毛球
<input type = "checkbox" name = "hobby"> 篮球
<input type = "checkbox" name = "hobby"> 乒乓球
<!-- 可以同时选择多个 --> <br>
<input type="text"> <input type = "button" value="搜索"> <!--普通按钮--> <br>
<input type="submit" value="提交表单"> <!--提交按钮-->
<input type="reset" valut="重置表单"> <!--重置表单--> <br>
<input type="image" src=""> <!--图像标签,src中为图像的路径--> <br>
提交文件: <input type="file">
</body>
</html>
文本域标签:<textarea></textarea>,与QQ聊天界面的输入框相似
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>留言板</h3>
<textarea name="" id="" cols="30" rows="10">
</textarea>
</body>
</html>
下拉菜单:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
省份:
<select name="" id="">
<option></option>
<option selected="selected">北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
</select>
城市:
<select name="" id="">
<option></option>
<option selected="selected">天安门</option> <!--默认选中项-->
<option>朝阳区</option>
<option>大兴</option>
<option>通州</option>
</select>
</body>
</html>
表单域:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="xxx.php" method="get" name="userMessage">
用户名:<input type = "text" value="用户名"/> <!-- 文本框 --> <br>
密 码:<input type= "password" maxlength="10"/> <!--密码框--> <br>
性别:<input type= "radio" name = "sex" checked = "checked"/> 女 <!--默认选中-->
<input type="radio" name = "sex">男 <br>
<!--一组单选框,通过相同的name值实现单选-->
爱好:<input type="checkbox" name = "hobby" checked = "checked"> 羽毛球
<input type = "checkbox" name = "hobby"> 篮球
<input type = "checkbox" name = "hobby"> 乒乓球
<!-- 可以同时选择多个 --> <br>
<input type="text"> <input type = "button" value="搜索"> <!--普通按钮--> <br>
<input type="submit" value="提交表单"> <!--提交按钮-->
<input type="reset" valut="重置表单"> <!--重置表单--> <br>
<input type="image" src=""> <!--图像标签,src中为图像的路径--> <br>
提交文件: <input type="file">
<h3>lable 标签的使用</h3>
<label>账户:<input type="text"></label> <!--直接用lable标签包裹住input标签即可--> <br>
<label for="two">账户:<input type="text"><input type="text" id="two"></label>
</form>
</body>
</html>
datalist标签:应该与input标签一起配合使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" value="搜索明星" list="star">
<datalist id="star"> <!--和input一起配合使用-->
<option>刘德华</option>
<option>郭富城</option>
<option>成龙</option>
<option>张学友</option>
<option>张柏芝</option>
</datalist>
</body>
</html>
多媒体标签(了解):<embed></embed>
以下是一个简单的例子:
<embed src="https://www.bilibili.com/video/BV1rx411u7tv?p=64&share_source=copy_web" width="960" height="800"
allowScriptAccess='always' align='middle' quality='high' allowFullScreen='true'>
<emded />
音频播放(了解):<audio></audio>
以下是一个简单的例子:
<audio src=”” autoplay=”autoplay” controls loop=”-1”>,分别表示音频路径,是否自动播放控制键快进,循环播放
视频播放(了解):<video></video>
例子:<video src=”” controls autoplay width=”800px”></video>
当播放一个文件的不同数据格式时,可以使用sourse标签进行播放,以音频为例:
<audio>
<source src=”xxx.mp3”>
<source src=”xxx.ogg”>
</audio>
- 什么是CSS?
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
- 基本语法:
属性名:属性值(color:red)
- 分类
- 行内样式:html标签直接使用style属性,适用于一些简单的修改
- 内嵌样式:在html页面中写样式,但是要写在style标签中
- 外部样式:在html页面外面写样式,并在页面当中引入,需要使用link标签
- 选择器:
- 标签选择器:
<style> p { color: red; // 将p标签中的文字改为红色 } </style>
2.类选择器:’.’代表red是一个类,且类选择器是最为常用的
- 标签选择器:
<style>
.red {
color: red;
}
</style>
3.Id选择器:口诀:样式“#”定义,结构id调用,只能调用一次,切勿被别人使用
<style>
#red {
color: red;
}
</style>
4.通配符选择器:将所有的标签都改成了相同的样式
<style>
*{
color: red
}
</style>
5.后代选择器
<style>
ul li {
color: red;
}
</style>
- 常用的样式属性:
- 文字:字体系列,大小,粗细,颜色,对齐,装饰,缩进,行间距
修改字体:font-family:”微软雅黑” (将字体改为微软雅黑)
修改大小:font-size:20px (px表示像素)
修改粗细:font-weight: 700 与font-weight: bold等效
修改颜色:color: red (将字体颜色修改为红色)
对齐方式:text-align: center (居中对齐,还有left和right的选项)
装饰:text-decoration: underline(在字体上加上下划线,还有overline:上划线,line-throught:删除线,none:没有装饰等选项)
缩进:text-indent:2em (缩进2个字符,em代表当前1个字符的大小)
行间距:line-height:20px(行间距为20px)
2. 背景
修改背景颜色:background-color: red (将背景改为红色)
插入背景图片:background-image:url(“images/pic.png”) (插入背景图片,url表示图片路径)
背景平铺:background-repeat: no-repeat(不平铺,repeat:平铺,repeat-x:沿着x轴进行平铺;repeat-y:沿着y轴进行平铺)
背景位置:background-position: center left(向左居中对齐,同理,还有向右居中对齐等);精确位置:background-position: 20px 50px (20px: x坐标,50px: y坐标)
3. 边框线
border-color:red (边框线设为红色)
border-width:5px (边框宽5个像素)
border-style:solid(实线,还有dashed和dotted选项)
复合写法:border:red 5px solid (参数的顺序随意)
4. 间距和边距
内边距:padding(还有左边距padding-left,上边距等同理)
padding:5px (内边距为5px)
padding:10px 15px (上下边距为10px,左右边距为15px)
padding:5px 10px 15px (分别为上,左右,下边距)
padding:5px 10px 15px 20px (分别为上,右,下,左边距)
5. 外边距:margin(同理,还有左边距等),与padding用法几乎相同
6. 位置和布局
浮动float:left(常用还有right属性)
定位position:relative(相对定位),相对原来的位置进行移动,原来的位置保留,例如:
<style>
.test1 {
position: relative,
top: 100px,
left: 100px
}
</style>
则表示跟之前的位置相比上边距增加100px,左边距增加100px;
absolute(绝对定位),例如:
<style>
.test1 {
position: absolute,
top: 100px,
left: 100px
}
</style>
表示跟最近的祖先元素相比,上边距增加100px,左边距增加100px,如果没有祖先元素则以浏览器为准进行定位。
7. 隐藏和展示
display:none(不展示元素,而且不保留位置,还有block等选项)
visibility:hidden(不展示,而且保留位置,还有visible等属性)
overflow:visible(超出部分显示,还有hidden,scroll,auto等属性)
好了,关于html和css的知识就总结到这里了,之中肯定有很多的东西没有写出来,还请大家多多体谅,同时,目前列出来的东西可能还有些错误,也请大家指正。