Java小白修炼手册--第三阶段--WebBasic( Web前端)--HTML

本文链接：https://blog.youkuaiyun.com/c202003/article/details/106676937

WebBasic 网页编程基础

HTML:

WebBasic 网页编程基础

(学习如何开发页面,安装HBuilder)

HTML:

(学习如何搭建页面结构和内容)

Hyper Text Markup Language: 超文本标记语言

超文本：不仅仅是纯文本还包括：字体效果（大小，颜色，风格等）和多媒体信息（图片、音频、视频）
标记语言：由一对尖括号组成，有单标签<abc> 和双标签<xyz aaa='bbb'>xxx</xyz>
双标签之间的内容成为标签体,写在开始标签里面的键值对称为属性
和XML不同点： XML是可扩展标记语言，标签可以随意写没有任何规范
学习HTML主要学习的就是有哪些HTML标签以及标签和标签之间的嵌套关系

<!-- 文档声明：告诉浏览器使用html的哪个版本的标准解析页面，
此写法是告诉浏览器使用html5的标准解析页面 -->
<!DOCTYPE html>
<html><!-- 根标签： 页面中级别最高的标签 -->
	<head><!-- 头标签：给浏览器看的内容写在头标签里面 -->
		<!-- 指定字符集 -->
		<meta charset="utf-8"><!-- 告诉浏览器页面内容使用的字符集是utf-8 -->
		<title></title><!-- 页面标题 -->
	</head>
	<body><!-- 体标签：给用户看的内容写在体标签里面 -->
		
	</body>
</html>

文本相关标签

1. 内容标题h1-h6
字体加粗，独占一行，自带上下行间距
2. 段落标签p
独占一行，自带上下行间距
3. 水平分割线hr
4. 换行br 在html中回车只能识别成一个空格如果需要换行使用br标签
5. 加粗b 斜体i 小字small
6. 删除线s 下划线u

列表标签:

1. 无序列表

       <ul type="square">
           <li>刘备</li>
           <li>关羽</li>
           <li>孙尚香</li>
           <li>诸葛亮</li>
           <li>刘禅</li>
       </ul>

2. 有序列表

       <ol type="1" start="10" reversed="reversed">
           <li>打开冰箱门</li>
           <li>把大象装进去</li>
           <li>关上冰箱门</li>
       </ol>

3. 列表嵌套：有序和无序可以任意无限嵌套

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1 align="center">个人简历</h1>
		<hr >
		<h2>基本信息</h2>
		<p>姓名：<b>苍老师</b></p>
		<p>性别：<i>男</i></p>
		<p>爱好：<u>摄影</u></p>
		<h2>掌握技能</h2>
		<ul>
			<li>吃</li>
			<li>喝</li>
			<li>玩</li>
			<li>乐</li>
		</ul>
		<h2>学业情况</h2>
		<ol>
			<li>小学9年</li>
			<li>中学8年</li>
			<li>高中12年</li>
		</ol>
	</body>
</html>

图片标签img:

-支持的图片格式： jpg/jpeg, png, gif
- src图片路径：
   相对路径：访问站内资源时使用
   1. 和页面同级目录：直接写图片名
   2. 在页面的上级： ../图片名
   3. 在页面的下级：文件夹名/图片名
   绝对路径：访问站外资源时使用，访问站外资源又称为图片盗链（好处：可以节省本站资源，坏处：有可能会找不到图片）
- width/height:设置图片的宽高
   两种赋值方式:1. 像素 2. 上级元素的百分比
   如果只设置宽度,高度会等比例缩放
- title: 鼠标在图片上悬停时显示的文本
- alt: 图片不能正常显示时显示的文本

超链接a

- href: 资源路径, 使用方式类似src,支持相对路径和绝对路径, 如果访问的资源浏览器支持浏览则直接浏览如果浏览器不支持浏览则触发下载
- 图片超链接: 用a标签包裹图片就是图片超链接
- 页面内部跳转: 在目的地标签里面添加id="xxx", 在点击的超链接中href="#xxx" 即可跳转到页面中id为xxx的元素位置

表格table

- 标签: table tr表示行 td表示列 th表头(加粗并且居中) caption表格标题
- 属性: table:border边框 cellspacing单元格间距 cellpadding单元格距内容的距离 td:colspan跨列rowspan跨行

表单form

- 作用:用于获取用户输入的信息,并且将信息提交到服务器
- 学习表单就是学习表单中有哪些控件

文本框:
<input type="text" name="username" value="xxx" 
maxLength="5"  readonly="readonly" placeholder="xxxx" >
密码框
<input type="password" name="pwd" value="xxx" maxLength="5" readonly=" readon1y" .
placeholder="xxxx" >
单选
<input id="xxx" type="radio" name="xxx" value="xx"  checked="checked"
< label for=" xxx">xxx</label>
多选
<input id="xxx" type=" checkbox" name="xxx" value="xx" checked=" checked">
日期
<input type="date" name="xxx*">
文件
<input type="file" name="xxxx">
文本域
<textarea name="xxx" cols="20" rows="5" placeholder="xxxx"></textarea>
下拉选 city=bj
    <select name="city">
        <option value="bj">北京</option>
        <option>xxxx</option>
        <option>xxxx< /option>
    </select>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- action提交地址  
		form表单中所有控件必须要有name属性 不然参数不会传递-->
		<form action="http://www.tmooc.cn" method="get">
			<!-- 文本框 value默认值 placeholder占位文本
			 maxlength最大字符长度-->
			<input type="text" name="username"
			 value="小明" placeholder="请输入用户名"
			  maxlength="5" readonly="readonly" />
			  <!-- 文本框和密码框的属性通用-->
			<input type="password" name="pwd"
			 placeholder="请输入密码" />
			 <hr >
			 <!-- 单选 必须写value如果不写 提交过去的内容都是on
			  checked默认选中  -->
			 性别:<input type="radio" name="gender" value="m" id="m" />
			 <!-- label作用:扩充点击范围点击字触发单选 for和上面的id对应-->
			 <label for="m">男</label>
			 <input type="radio" name="gender" value="f" checked="checked" />女
			 <hr >
			 <!-- 多选和单选属性通用 -->
			 兴趣爱好:<input type="checkbox" name="hobby" value="cy" />抽烟
			  <input type="checkbox" name="hobby" value="hj" />喝酒
			  <input type="checkbox" name="hobby" value="tt" checked="checked" />烫头
			  <hr >
			  <!-- 日期选择器 -->
			  生日:<input type="date" name="birthday" />
			  <!-- 文件选择器 -->
			  <hr >
			  靓照:<input type="file" name="pic" />
			  <hr >
			  <!-- 文本域 获取多行文本 rows行 cols列-->
			  自我介绍:<textarea name="intro" rows="4" 
			  cols="20" placeholder="说点儿什么..."></textarea>
			  <hr >
			  <!-- 下拉选-->
			  所在城市:<select name="city">
			  	<option value="bj">北京</option>
			  	<option value="sh" selected="selected">上海</option>
			  	<option value="sz">深圳</option>
			  </select>
			<input type="submit" value="注册"/>               
		</form>
	</body>
</html>

分区标签

- 分区标签可以理解成是一个容器,对多个有相关性的标签进行统一管理
- 常见的分区标签div和span
   1. div:块级分区元素, 特点:独占一行
   2. span:行内分区元素,特点:共占一行
- 如何对页面内容进行分区?
   一个页面至少分为三大区: 头体脚, 每个大区内再细分n个小的区域

       <div>头</div>
       <div>体</div>
       <div>脚</div>
- html5标准中新增了分区标签,作用和div是一样的主要是为了提高代码的可读性,
包括: header头 footer脚 article正文 nav导航 section区域
       <header></header>
       <article></article>或<section></section>
       <footer></footer>