2019.07.30(day01)
java web开发
web前端:
前端的技术:
html:用来做网页,用html构建网页的内容
css:用来修饰网页内容,给网页化妆,使网页额内容更美观
javascript:用户跟网页交互
js:做表单验证和网页特效
js:google,最早做了联想输入(局部刷新) 地图 ajax技术实现
html:
html中有很多的标签/标记/对象/元素/节点
html遵守xml的规范
xml中的节点是由程序员自定义的,但是html中的标记是固定的
html中的内容是由文本组成的,且都有默认的样式,可以用css来改动
最终在浏览器中解析并显示
是以.html或.htm为结尾
html的文档结构:
必须以<html>为根节点
html有两个子节点(<head>和<body>)
<head>
放置的是网页的头信息
<body>
放置的是网页内容信息,这些内容都显示在浏览器页面中
<html>节点前添加html文档的声明
<!DOCTYPE>用来声明html版本
现阶段有html4和html5这两个版本
比如:
<!DOCTYPE html>
<html>
<head>
<!-- 告知网页的文字编码utf-8 -->
<meta charset="UTF-8">
<!-- 网页的标题 -->
<title>Insert title here</title>
</head>
<body>
<!-- 文本内容 -->
</body>
</html>
在body体中显示文本:
-标题标签/元素
<h#>文字</h#>
#号取值为1~6(字体大小递减)
-段落元素
<p>段落文本</p>
p节点可以自动换行,且段落间间距很大
-列表元素
<ul>:无序列表,列表元素用</ul>
<ol>:有序列表,列表元素用</ol>
-分区元素
<div>:可以说成div层,div块,更多用户做网页布局和网页的内容
按照块来显示
可以自动换行,行间距不大
<span>:可以说成行内块,一般用于处理一个大块文字中的部分文字
-行内元素:
<i>:用来定义斜体文字
<b>:用来给文组加粗
<del>:给文字带有删除线,建议改用样式
<u>:给文字添加下划线,建议改用样式
-空格折叠
默认情况下html中的多个空格,多个制表符,多个换行符
都会压缩成空格
-文字的换行
<br>:换行,此元素没有</br>
<br /> 等同于 <br>
-特殊符号的使用
参见html特殊符号图
body中的图像显示:
-图片元素
<img />:显示图片,没有</img>
属性:
src:指定图片的源
width:指定图片的宽度
height:指定图片的高度
-多媒体元素
<embed>:可以显示视频和音频
src:指定的播放源
width:指定的宽度
height:高度
<video>:可以播放视频,但是视频的格式有约束
例:
<!DOCTYPE html>
<html>
<head>
<!-- 告知网页的文字编码 utf-8 -->
<meta charset="UTF-8">
<!-- 网页的标题 -->
<title>Insert title here</title>
</head>
<body>
<!-- 文本内容 -->
这是我的第一个网页
<h1>标题1</h1>
<h6>标题6</h6>
<p>段落文本1</p>
<p>段落文本2</p>
<!--无序列表-->
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
<!--有序列表-->
<ol>
<li>ddd</li>
<li>eee</li>
<li>fff</li>
</ol>
<div>div内容1</div>
<div>div内容2</div>
<div>
div的文字块,我爱java,java是我一生的追求,<br /><br />
<span style="color:red;">扯淡!!!</span>
</div>
<div>
<i>斜体 文字</i><br />
<b>加粗文字</b><br />
<del>删除线文字</del><br />
<u>下划线文字</u><br />
</div>
<img src="web概述.png" width="100px" height="100px"/>
<embed src="aa.mp4"/>
<embed src="aa.mp3" width="0" height="0"/>
</body>
</html>