Java旅程（一） —— html&css

最新推荐文章于 2024-07-28 19:41:52 发布

还没想好ne

最新推荐文章于 2024-07-28 19:41:52 发布

阅读量454

点赞数 1

文章标签： java html

本文链接：https://blog.csdn.net/u010507199/article/details/53843037

版权

Javaweb 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

02-HTML概念&HELLOWorld

HTML概念
HTML==> hyper text mark-up language==>超文本标记语言
超文本: 1.表达能力优于普通文本.声音 .图形等..
2.超链接
标记语言:标记构成的.(HTML XML XHTML)

HTML是干什么的?
1.网页.
2.展示.
HTML是由谁来解析?
浏览器来负责解析HTML.
HTML文档的后缀名?
.html
.htm
以上两种后缀名没有区别.
文档构成:
HTML文档.
最外层使用<HTML>标签包裹
<HEAD> 头 ==> 标题.网页属性信息,CSS..
<BODY> 体 ==> 正文.
标签写法:
1.<>中包裹一个英文单词
2.所有标签不区分大小写(推荐使用小写)
3.标签分为两类
1>围堵标记=> 有开始标签有结束标签例如 <body></body>
2>自闭合标签 => 例如 <br/>
注意:所有标记语言,标签中的英文单词没有以数字开头的.<>
注意:HTML中不支持 : 空格回车制表符（Tab键）.都会被解析成一个空白字符.

-- 01-hello.html

<html>
<head>
<title>hello world~</title>
</head>
<body>
hello world!<br/>
hello world!
</body>
</html>

03-排版标记

-- 02-排版标记.html

<html>
<head>
<!-- 解决乱码,告诉浏览器 当前文档类型和编码 -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
静夜思<br/>
<hr/>
李白<br/>
<p>
床前明月光,<br/>
疑是地上霜.<br/>
举头望明月,<br/>
低头思故乡.<br/>
</p>
静夜思<br/>
<hr/>
李白<br/>
<p>
床前明月光,<br/>
疑是地上霜.<br/>
举头望明月,<br/>
低头思故乡.<br/>
</p>

<pre>
public void main(String[] args){
	int i = 1+1;
	System.out.print(i);
}
</pre>

</body>
</html>

--分解--

04-字体标签

(小插曲)

---W3CSchool离线手册的使用---- --03-字体标记.html

<html>
<head>
<!-- 解决乱码,告诉浏览器 当前文档类型和编码 -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 
标题标签 <hn> ==> n的取值范围是1~6;
	1.1~6从大到小.
	2.文字加粗
	3.换行
字体标签: <font> 该标签的使用必须配合属性.
	size:大小. 取值1~7之间 从小到大.
	face:字体.
	color:颜色
		1.直接填写颜色的英文名称
		2.#FF0000
		3.rgb(255,0,0)
其他一些简单标签:
	<strike> => 中划线.
	<big> => 变大
	<small> => 变小
	<u> =>  下划线
	<b> =>  标签呈现粗体文本效果。
	
	sub /sup => 上下角标.
 -->
<h1>静夜思</h1>
	<font face="黑体" size="7"  color="rgb(255,0,0)" >李白</font><br/>
<strike>床前明月光,</strike><br/>
<big>疑是地上霜.</big><br/>
<small>举头望明月,</small><br/>
<u>低头思故乡.</u><br/>

<b>床前明月光,</b><br/>

<hr>

3<sup>2</sup>,3<sub>2</sub>

</body>
</html>

--分解--

05-转义字符

--04-转义字符.html

<html>
<head>
<!-- 解决乱码,告诉浏览器 当前文档类型和编码 -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<!--
	&nbsp;==> 空格
	&gt;/&lt; == > (大于号) / < (小于号)
	 
 -->
<h1>静夜思</h1>
             李白<br/>
床前明月光,<br/>
疑是地上霜.<br/>
<small>举头望明月,</small><br/>
<u>低头思故乡.</u><br/>

<b>床前明月光,</b><br/>

<hr>
1<3>2,a<b>c

</body>
</html>

06- 清单标记

--05-清单标记.html

<html>
<head>
<!-- 解决乱码,告诉浏览器 当前文档类型和编码 -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 
	ol有序列表: order list
		type属性: 取值 A a I i 1(默认值)	
		start属性: 从几开始计数
		<li>
	
	ul无序列表: unorder list
		type属性:disc  (默认)
				square  方形
				circle  圆形
		<li>
	分类列表: 
		dl : definition list
			dt : definition title
				dd : definition description
 -->
	<ol type="i" start="110" >
		<li>吃饭饭</li>
		<li>睡觉觉</li>
		<li>打豆豆</li>
	</ol>
	<hr/>
	<ul type="circle" >
		<li>吃饭饭</li>
		<li>睡觉觉</li>
		<li>打豆豆</li>
	</ul>
<hr/>
<dl>
	<dt>rpg游戏</dt>
			<dd>仙剑奇侠传</dd>
			<dd>金庸群侠</dd>
			<dd>剑侠情缘</dd>
			<dd>轩辕剑 </dd>
	<dt>moba游戏</dt>
		<dd>真三国无双 </dd>
		<dd>Dota </dd>
		<dd>LoL </dd>
</dl>	
				
</body>
</html>

--分解--

07- 图形标签

--06-图形标签.html

<html>
<head>
<!-- 解决乱码,告诉浏览器 当前文档类型和编码 -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 
	img图形标签
		src属性: 指定图片位置
		alt属性: 当图片无法加载时显示的提示信息.
		title属性: 鼠标悬浮时显示提示信息
		heigth属性: 图片的高(单位是像素) (如果宽和高只指定一个,图片会按比例缩放.)
		width属性:图片的宽.
		border属性: 边框(单位是像素)
		usemap属性: 将图片分区,每个区点了之后连接到不同的页面.dw=> (现在不常用)
 -->
 <img src="001.jpg"  alt="这是萌妹子!" title="这是萌妹子~~"  border="50" />
</body>
</html>

--这么简单就不分解了 O(∩_∩)O哈哈~

08- 超链接

还没想好ne

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Java旅程（一） —— html&css

02-HTML概念&HELLOWorld HTML概念HTML==> hyper text mark-up language==>超文本标记语言超文本: 1.表达能力优于普通文本.声音 .图形等..2.超链接标记语言:标记构成的.(HTML XML XHTML)HTML是干什么的? 1.网页.2.展示.HTML是由谁来解析?浏览器来负责解
复制链接

扫一扫

专栏目录