JavaWeb的学习 -- 第一阶段 html-CFANZ编程社区

基础定义：（了解）

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。描述页面，包含HTML标签及文本内容。

您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

第一个实例（上手多敲）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>

HTML标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

HTML元素

<p>这是一个段落。</p> 从头到尾整个是一个元素

咱们后端的学点javaweb用idea进行操作就可以了，不用下前端那么好使的软件。

开始第一个hellword程序

点击finish完成创建

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>Hello world</h1>
</body>
</html>

任意选择一个，可以用idea自带的，也可以使用本机上的浏览器

这样咱们第一个就成功了；

常用标签

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常用标签</title>
</head>
<body>

     <!--标题标签 -->
     <h1>早安</h1>
     <h2>早安</h2>
     <h3>早安</h3>
     <h4>早安</h4>
     <h5>早安</h5>
     <h6>早安</h6>
     
     <!-- 段落标签 -->
     <p>我是段落标签<p/>
     
     
     <!-- 换行标签 -->
          我是段落标签
     <hr>
          我是段落标签
     
     <!-- 无序标签 -->
     <ul>
     	<li>香蕉</li>
     	<li>橘子</li>
     	<li>辣条</li>
     	<li>榴莲</li>
     
     </ul>
     <!--ul定义一个无序列表 -->
     
     <!-- 有序列表ol li -->
     <ol start = "5">
        <li>香蕉</li>
     	<li>橘子</li>
     	<li>辣条</li>
     	<li>榴莲</li>
     </ol>

</body>
</html>

超链接

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<!-- 超链接: 链接到另一个资源 
	target 规定在何处打开链接文档
	_blank 表示在新窗口打开
	_self  表示在当前页面打开
	-->
	<a href=" https://www.bilibili.com/video/BV1r4411S7Eh?p=5&spm_id_from=pageDriver" target="_blank">我是超链接</a>
	<a href="https://www.bilibili.com/video/BV1r4411S7Eh?p=5&spm_id_from=pageDriver" target="targetFrame">我是超链接</a>
	<iframe src = "" name="targetFrame"></iframe>
	<iframe src = "https://www.bilibili.com/video/BV1r4411S7Eh?p=5&spm_id_from=pageDriver" name="targetFrame"></iframe>

</body>
</html>

内联框架

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<!-- 内联框架 iframe
	src= ""   代表资源的地址
	 -->
	 <iframe src="../img/课程表.png"></iframe>

</body>
</html>

图片标签

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<!-- 图片标签 img 表示引用图片
	alt=“ ”  如果图片找不到显示的提示内容
	src=“ ” 图片的源（路径）
	
路径有两种写法：
相对路径：不以/开始的路径都是相对路径，引入的资源相对于当前的资源的位置
绝对路径：以/开始的路径是绝对路径
	
	-->
	<img alt="课程表" src="../img/课程表.png"/>
	<img alt="课程表" src="/Html_Demo/img/课程表.png"/>

</body>
</html>

表格

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<!--在这里创建表格table 
	定义表格 
	tr 定义表格的一行
	td 定义表格的一列
	th 定义表头
	colspan  跨列
	rowspan  跨行
	-->
	<table border="1">
		<tr>
			<th>姓名</th> <th>性别</th> <th>爱好</th>
		</tr>
		<tr>
			<td colspan="2">张三</td> <td>男</td> <td>乒乓球</td>
		</tr>
		<tr>
			<td>李四</td> <td>女</td> <td>羽毛球</td>
		</tr>
	
	
	
	</table>
	
</body>
</html>

表单

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<!-- 表单：把数据提交给服务器
	数据一般都是用户填写的 
	action:指定要提交到的资源位置
	input 定义一个文本框（type="text）
	input 定义一个提交按钮(type="submit")
	input 定义一个密码框（type="password")
	input 定义一个单选按钮(type="radio")
	input 定义一个多选框(type="checkbox")
	
	-->
	<form action="target.html">
		用户名:<input type="text" name="username" value=""/>
		密码:<input type="password"name="pwd"value="">
		<br/>性别: 男:<input type="radio"name="gender"value="male"/> 女:<input type="radio"name="gender"value="female"/>
		<br/>爱好: 香蕉<input type="checkbox"name="aihao"value="xj"/>
			    辣条<input type="checkbox"name="aihao"value="lt"/>
			    茶叶蛋<input type="checkbox"name="aihao"value="cyd"/>
		<br/>
		最喜欢的老师:
		<select name="teacher">
			<option value="tong">童老师</option>
			<option value="liu">刘老师</option>
			<option value="lei">雷老师</option>
		</select>
		
		
		<input type="submit" value="登录">
	</form>
</body>
</html>

给大家两个小练习

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello world</title>
<script type="text/javascript">
//js代码
	window.onload = function(){
	var btn =document.getElementById("btnid");
	btn.onclick = function(){
		alert("hello world");
	}
	
}


</script>


</head>
<body>
	
	<button id="btnid">sayHello</button>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>欢迎登录</h3>
<form action="success.html" method="post">
	<table>
	 <tr>
	    <td>用户名:</td>
	    <td><input type="text" name="username" /></td>
	 </tr>
	 <tr>
	    <td>密码:</td>
	    <td><input type="password" name="pwd"/></td>
	 </tr>
	 <tr>
	   <td  colspan="2">
	   <input type ="submit" value="登录"/>
	 </tr>
	</table>
<!-- 	用户名： <br/><input type="text" name="username"/><br/>
	密码：<input type="password" name="pwd"/> <br/> -->
	



</form>
</body>
</html>