HTML的基本元素

来源：互联网发布：mac 百度网盘知乎编辑：程序博客网时间：2024/06/05 04:18

一java体系结构
1.数据库
SQL跟服务器JDCB连接

2.服务器
Spring:java基础，javaSE，
JDCB（MyBatis Hibernate）跟数据库SQL连接，
Servlet（Hibernate）跟浏览器连接

3.浏览器
HTML，CSS，JavaScript（jQuery）

二.浏览器主要内容

1.HTML
用来勾勒出网页的结构和内容

2.CSS
用来美化网页

3.JavaScript
让网页呈现动态的数据和效果

4.jQuery
框架，可以提高js编程效率

常用浏览器：
1.IE2.Edge3.Firefox4.Chrome(Opera)5.safari

三.web三要素：
HTTP，HTML存储在服务器上，HTML运行在浏览器上

四.XML和HTML
1.XML——>区分大小写
可扩展（自定义）标记语言
标记、属性、嵌套关系都可以定义
用来存储或传输数据

2.HTML——>不区分大小写——>是标签固定的XML规范
超文本标记语言
标记、属性、嵌套关系是固定(w3c)的
用来显示数据
某些版本的HTML完全符合XML规范

五.创建WEB项目注意事项
1.切换视图（在Eclipse右上角选择javaEE视图）
2.选择war包（在创建maven项目最后一步，选择war）
3.解决报错（展开项目，右键点击Deployment，选择Generate...）

六.在WEB项目下src下，main下，webapp下建包写HTML文档（无加说明都是双标签）
同样在webapp下建images包保存图片

1.主要构成部分：
声明网页版本(<!DOCTYPE html>)，声明网页的编码(<meta charset="UTF-8">——单标签),
唯一的根元素(<html>)，头部元素(<head>)跟身体元素(<body>)

2.<head>里的标签：
<title>、<meta>、<link>、<style>、<script>等

3.<body>里的元素：
（1）标题元素（从<h1>到<h5>），
（2）段落元素（<p>），

（3）列表元素：有序列表：<ol>,无序列表：<ul>，列表项：<li>
（4）分区元素：<div>——<div style="color:red;">
（5）行内元素：<span>，<i>斜体，<em>,<b>加粗,<strong>,<u>加下划线，<del>加删除线
（6）空格折叠：默认情况下多个空格，换行，默认是一个空格，<br>单标签换行，<hr>单标签水平线

（7）图像：<img alt="flower" src="../images/f1.jpg">（width,height)等属性
（8）超链接：<a href="http://www.">点我跳转</a>
target="_blank"（另起一个网页打开）"_self"（本网页打开——默认方式）
锚点用法1：<a id="suyan">如果</a>
<a href="#suyan">please</a>——点击回到页面如果那里
锚点用法2：<a href="#">顶部</a>——点击回到页面顶部

（9）表格：<table>,<tr>（行），<td>（列）
<table> 属性：border边框,width，height，align
cellpadding（单元格边框与内容之间的间距），cellspacing（单元格之间的间距）
<tr> 属性：align，valign
<td> 属性：align，valignwidth，width，height，colspan（跨列），rowspan（跨行）
行分组：表头行分组：<thead></thead>，表主体行分组：<tbody></tbody>，
表尾行分组：<tfoot></tfoot>

4.显示方式：
（1）块：有宽高，垂直排列：hn，p，ol，ul，div，table，form
（2）行内：无宽高，水平排列：span，i，em，b，strong,u,del,a,label
（3）行内块：有宽高，水平排列：img，input，select，textarea
（4）修改显示方式：
display:block;display:inline;display:inline-block;display:none;

（10）居中标签：<center>不推荐使用，推荐用CSS样式剧中文本
节，区域标签：<section>
缩小字体标签：<small>
放大字体标签：<big>

练习Demo：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>演示各种标签</title></head><body><!-- 1.标题 --><h1>welcome to linsa's homepage</h1><h2>please look</h2><h3>haha</h3><!-- 2.段落 --><p>Apple round</p><p><a href="#suyan">Apple</a> red</p><!-- 3.列表 --><!-- 1)有序列表 --><ol><li>Apple juicy</li><li>Apple sweet</li><li>Apple apple</li></ol><!-- 2)无序列表 --><ul><li>I love you</li><li>Apple sweet</li><li>I love to eat</li></ul><!-- 4.分区元素 --><div style="color:green;"><!-- 3)嵌套列表 --><ol><li>flower<ul><li>rose</li><li>lily</li></ul></li></ol></div><!-- 5.行内元素 --><p>你落入<i>封闭</i>的地牢,<span>发不出<b>求救</b>的讯号,我<u>折返</u>这古堡</span></p><!-- 6.空格折叠 --><p>爱转角     遇见了谁，<br>爱转角     以后的街，<br>是不是     由我来陪。<br></p><!-- 7.图片 --><!-- 1)绝对路径 --><!-- 2)相对路径 --><p><!-- 一般是这样 --><img alt="flower" src="../images/f1.jpg"></p><!-- 8.超链接 --><!-- 1)基本用法 --><p><a href="http://www.baidu.com">百度</a><a href="http://maven.aliyun.com/nexus" target="_blank">文档</a></p><!-- 2)锚点 --><p><a id="suyan">如果</a>再看你一眼，是否还会有感觉。</p><!-- 3)顶部默认是锚点，没有名字 --><p><a href="#">顶部</a></p><!-- 9.表格 --><!-- 1)基本用法 --><table border="1" cellspacing="0" width="20%"><tr><td>red</td><td>green</td></tr><tr><td>blue</td><td>yellow</td></tr></table><br><!-- 2)跨列 --><table border="1" cellspacing="0" width="20%"><tr><td colspan="2"><center>red</center></td><!-- <td>green</td> --></tr><tr><td>blue</td><td>yellow</td></tr></table><br><!-- 3)跨行 --><table border="1" cellspacing="0" width="20%"><tr><td rowspan="2">red</td><td>green</td></tr><tr><!-- <td>blue</td> --><td>yellow</td></tr></table><br><!-- 4)行分组 --><table border="1" cellspacing="0" width="30%"><thead><tr><td>编号</td><td>名称</td><td>金额</td></tr></thead><tbody style="color:orange;"><tr><td>1</td><td>鼠标</td><td>100</td></tr><tr><td>2</td><td>键盘</td><td>200</td></tr></tbody><tfoot><tr><td colspan="2">合计</td><td>300</td></tr></tfoot></table></body></html>

七.做网页：仅供参考
1.分区：所有区域宽为960px，水平居中
加边框style="border:1px solid red;width:960px;margin:0 auto;"

阅读全文

0 0