Java web程序与开发 01 HTML

最新推荐文章于 2020-05-26 14:39:25 发布

lijing-blog

最新推荐文章于 2020-05-26 14:39:25 发布

阅读量120

点赞数

分类专栏： Web程序开发与设计

本文链接：https://blog.csdn.net/weixin_45893523/article/details/104823529

版权

Web程序开发与设计专栏收录该内容

9 篇文章 7 订阅

订阅专栏

1.文件标签

构成html最基本的标签

1.html

html文档的根标签

2.head

头标签，用于指定html文档中的一些属性，引入外部资源

3.title

标题标签

4.body

体标签

5.定义文件

<!DOCTYPE html>
html5中定义该文档是html文件

2.文本标签

1.注释的写法

2.h1 to h6

h1~h6:字体大小逐渐递减一级标题二级标题…

3.p

段落标签

4.br

换行标签

5.hr

一条水平线

*****属性：
color：颜色
width：宽度
size：高度
align：对齐方式
center：居中
left ：左对齐
right：右对齐

**举例：**<hr color="red" width="200" size="10" align="left"/>

6.b

字体加粗

7.i

字体斜体

8.font、center

1.font

字体标签
***属性：
color：颜色
width：宽度
face：字体


**举例：** <font color="red" size="5" face="楷体">白日依山尽</font><br>

***属性定义：
color：
1.英文单词：red，green…
2.rgb（值1，值2，值3）值的范围：0-255
**举例:**color="#FF00FF"
width：
1.数值：width=“20”,数值的单位，默认是px（像素）
2.数组% 占比于相对于父元素的比例

2.center

字体居中

3.图片标签

把image文件夹先复制过去

1.展示一张图片举例

<img src="image/jingxuan_2.jpg"/>

2.图片的各种属性举例

<img src="image/jingxuan_2.jpg" align="right" alt="古镇" width="500" height="500/>

alt的意思就是如果你的图片位置写的不对，就会显示alt包含的内容喔！

4.列表标签

1.没有css的时候 用<table>来完成布局
2.如果一行只有一个单元格，使用<tr><td> </td></tr>
3.如果某一行有多个单元格，就使用
<tr>
	<td>
		<table>/<table>
	</td>
</tr>

==注意：==
<tr>　　</tr>　　　　代表的是一行
<tr>　　</tr>　　　　代表的是又一行
<td></td>写在<tr></tr>之间
<td>　　</td>　　　代表的是一个单元格
<td>　　</td>　　　代表的又是一个单元格

5.链接标签、块标签、语义化标签

1.链接标签

属性：
1.href：制定访问资源的URL（统一资源定位符）

**举例**：<a href ="http://www.itcast.cn" >点我</a>

	2.target：制定打开资源的方式
	_seil:默认值，在当前页面打开
	_blank：在空白页面打开

**举例**：<a href ="http://www.itcast.cn" target="_blank">点我</a>  //新增一个选项卡并进入超链接网址

	3.也可以访问当前资源

**举例**：<a href ="./5_列表标签" >列表标签</a><br>
<a href="mailto:+邮箱">联系我们</a>

	4.和图片标签的联合使用

<a href="http://www.itcast.cn"><img src="image/jingxuan_1.jpg"></a>

2.块标签

div：每一个div占满一整行块级标签
span：文本信息在一行展示，行内标签内联标签

3.语义化标签

1.<header>：页眉
2.<footer>：页脚
只是为了增强可读性 配合css一起使用

6.表格标签

html里面没有列只有行和一个一个的单元格

1.table:定义表格

1.width：宽度
2.border：边框
3.cellpadding：定义内容和单元格之间的距离顶在左边显示
4.cellspacing：定义单元格之间的距离，如果指定为0，则单元格的线会合为一条
5.bgcolor：背景色
6.algin：center居中

== 举例：==<table border="1" width="50%" cellpsdding="0" cellspacing="0" bgcolor="#facbd7" algin="center">

2. tr：定义行

3. td：定义单元格

4. th：定义表头单元格

默认字体会居中加粗

5.caption:表格标题

6.thead：表格的头部分

7.tbody：表格的体部分

8.tfoot：表格的脚部分

6.7.8都是为了增强可读性不会有太大变化

9.合并单元格举例

1.占两行
<th rowspan="2"></th>
2.占两列
<td colspan="2">hh</td>

7.列表标签

1.有序列表

		1> ol
		2> li

举例：

<ol type="1"  start="5">  //排序是12345    start表示从5开始  56789
	<li>睁眼</li>
	<li>看手机</li>
	<li>穿衣服</li>
	<li>洗漱</li>
</ol>

2.无序列表

		1> ul
		2> li

<ul type="square" >  //可以改变样式  前面是圆圈或者方块或者圆球
	<li>睁眼</li>
	<li>看手机</li>
	<li>穿衣服</li>
	<li>洗漱</li>
</ul>

8.表单标签

1.概念：用于采集用户输入数据，用于和服务器进行交互。

2.使用的标签：form

form:是用于定义表单的，可以定义一个范围，范围代表采集用户数据的范围

<form action="#" method="get">
用户名：<input name="username"><br>
密码：<input name="password"><br>
<input type="submit" value="登录">   //提交按钮 登录
</form>

form标签的属性：

action：制定提交数据的URL
method:制定提交方式
分类：一共七种，两种比较常用
get：
1.请求参数会在地址栏中显示，会封装在请求行中
2.请求参数的长度是有限制的
3.不太安全
post：
1.请求参数不会在地址栏中显示，会封装在请求体中（HTTP协议）
2.请求参数的大小没有限制
3.较为安全
表单项中的数据要想被提交，必须指定其name属性

表单项标签：

input：可以通过type属性项，改变元素展示的样式
一、 type属性：
1.text：文本输入框，默认值
placeholder:指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息
2.password：密码输入框
3.radio：单选框
注意：
1.要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样
2.一般会给每一个单选框提供value属性，指定其被选中后提交的值
3.checked属性，可以指定默认值
4.checkbox：复选框
注意：
1.一般会给每一个单选框提供value属性，指定其被选中后提交的值
2.checked属性，可以指定默认值
5.file：文件选择框
6.hidden:隐藏域，用于提交一些信息
7.按钮：
submit：提交按钮，可以提交表单
button：普通按钮
image：图片提交按钮
src属性指定图片的路径
二、label：指定输入项的文字描述信息
注意：
label的for属性一般会和input的id属性值对应。如果对应了，则点击label区域，会让input输入框获取焦点。

select：下拉列表
子元素：option，制定列表项
textarea：文本域
cols:指定多少列，一行多少个字符
rows：指定多少行。

举例

<form action="#" method="get"

	<label for="username">用户名</label>:<input type="text" name="username" placeholder="请输入用户名" id="username"><br>
	密码：<input type="password" name="password" placeholder="请输入密码"><br>
	性别：<input type="radio"  name="gender" value="male"> 男
	<input type="radio"  name="gender" value="male" checked> 女
	<br>
	爱好：<input type="checkbox" name="hobby" value="shopping">逛街
		 <input type="checkbox" name="hobby" value="java" checked>java  //checked就是默认被选中		 <input type="checkbox" name="hobby" value="game">游戏<br>
	图片：<input type="file" name="file"><br>
	隐藏域：<input type="hidden" name="id" value="aaa"><br>
	取色器：<input type="color" name="color" ><br>
	生日：<input type="date" name="birthday" ><br>
		 <input type="datetime-local" name="birthday" ><br>
	邮箱：<input type="email" name="email" ><br>
	年龄：<input type="number" name="age" ><br>

	省份：<select name="province">
			<option value="">--请选择--</option>
			<option value="1">北京</option>
			<option value="2">上海</option>
			<option value="3" selected>陕西</option>
		</select><br>
		
	自我描述：<textarea cols="20" rows="5" name="des"></textarea>
		
	<br>
	<input type="submit" value="登录">
	<input type="button" value="按钮">
	<input type="image" src="img/regbtn.jpg">
</form>

lijing-blog

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Java web程序与开发 01 HTML

基本语法小总结1.文件标签1.html2.head3.title4.body5.定义文件2.文本标签1.注释的写法2.h1 to h63.p4.br5.hr6.b7.i8.font、center1.font2.center3.图片标签1.展示一张图片举例2.图片的各种属性举例4.列表标签5.链接标签、块标签、语义化标签1.链接标签2.块标签3.语义化标签6.表格标签1.table:定义表格2....
复制链接

扫一扫