HTML的基本元素

最新推荐文章于 2024-01-10 15:29:48 发布

linsa_pursuer

最新推荐文章于 2024-01-10 15:29:48 发布

阅读量877

点赞数

分类专栏： JSP基础文章标签： html href table

本文链接：https://blog.csdn.net/linsa_pursuer/article/details/78368241

版权

JSP基础专栏收录该内容

14 篇文章 0 订阅

订阅专栏

一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.IE 2.Edge 3.Firefox 4.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;"

linsa_pursuer

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML的基本元素

锚点用法1：<a id="suyan">如果</a> <a href="#suyan">please</a>——点击回到页面如果那里锚点用法2：<a href="#">顶部</a>——点击回到页面顶部
复制链接

扫一扫