Java进阶-1.html

最新推荐文章于 2024-08-27 19:27:41 发布

闲人勿-

最新推荐文章于 2024-08-27 19:27:41 发布

阅读量168

点赞数

分类专栏： Java 文章标签： html javaee

本文链接：https://blog.csdn.net/qq_25560849/article/details/103529680

版权

Java 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

1.html

HTML：Hyper Text Markup Language 超文本标记语言，用来描述文本的字体，颜色，图片。HTML代码由标签组成。

html书写规则：

文件的后缀名：.html

标签必须用 <> 引起来

属性格式：key="value"，属性的值用引号引起来

标签名称不区分大小写

注意：

将所有的内容放在标签 <html></html>中

有开始标签和结束标签的标签称之为围堵标签，标签最好关闭

没有结束的标签的称之为空标签 <br/>

开始标签和结束标签之间的内容称之为标签体

 html页面中的注释

标签必须正常嵌套

2.文件标签

<html>：声明当前网页为html页面。html的子标签：

<head></head>

<body></body>

head：用来存放当前页面的重要信息，一般不展示在html页面上。head常见的子标签：

<title></title> 中间放网页的标题，会被爬虫给爬出来

<meta>元信息，<meta charset="UTF-8">指定浏览器用什么编码打开此页面

<link>用来导入外部css标签

<link rel="stylesheet" href="css/1.css" type="text/css"/>

<style></style>放内部样式的css代码，在后面会举例说明。

body：要展示的数据放在body中。

<html>
	<head>
		<meta charset="utf-8">
		<title>页面标题</title>
	</head>
	<body>
		<!-- 创建标题标签 -->
		<h2>公司简介</h2>
        <hr />
		<p>
			<font color="#FF0000"><b>“中关村黑马程序员训练营”</b></font>是由<b>传智播客</b>联合中关村软件园、CSDN
		</p>				
		<p>
			一直以来，黑马程序员以技术视角关注IT产业发展。
		</p>
	</body>
</html>

3.字体标签

1）字体标签：<font></font>，常用属性：

face：字体

size：尺寸，取值1-7

color：颜色

color颜色的取值：(RGB)

方式1： #xxxxxx，x为16进制

方式2：英文单词，red

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<font>天佑中华</font>天佑中华<br/>		
		<font size="7">我个大7</font>
		<br/>		
		<font color="red">我很红</font>
		<font color="#ff0000">我很红</font>	
		<br />
		<font face="黑体" size="6">我很黑</font>
	</body>
</html>

2）标题标签：<hn> </hn>

n取值：1~6，h1最大，h6最小，自动换行且留白，默认加粗。

常用属性：

align：对齐方式，left：左 right：右 center：居中

<h2 align="center">标题内容</h2>

3）排版标签：

段落标签：<p></p>

加粗：<strong></strong>

斜体：<i></i>

水平线：<hr/>

换行： <br/>

4.图片标签

<img/>

<img src="图片的路径" alt="替代文字" width="" height=""/>

常用属性：

src：图片的路径

alt：未完全加载或者没有资源时候，用文字替代图片

title：鼠标移上去显示的文字

width：宽

height：高

图片大小（width="" height=""）的写法：

方式1像素写法：123px，width="123px "

方式2百分比写法：20%，width="20% "

路径的写法：

相对路径：

./ 或者什么都不写，将会指向当前目录，图片放在当前html文件的目录下，就可以直接加载到网页上。

../ 上一级目录

绝对路径（常用）：

带协议的绝对路径：http：//www.itheima.com

本地的磁盘路径（开发中不用）

5.超链接标签

target默认值：_self ，即在当前页面打开跳转的新页面，也可以设置为_blank，在空白页面打开。

6.列表标签

<ol>有序，属性：type=”a”、”circle”，a是abc..排序，circle是空心的圆，disc是实心圆，square是实心方形，不加的话默认是123..，这些属性都不赞成使用。<ul> 无序

<li>为列表项

无序列表
    <ul>
        <li>内容1</li>
        <li>内容2</li>
    </ul>
有序列表
    <ol>
        <li>内容1</li>
        <li>内容2</li>
    </ol>

7.表格标签

<table border="1">
    <tr>
        <th>    </th> <!--表头单元格 默认居中加粗>
        <td>    </td> <!--普通单元格>
    </tr>
</table>

table的常用属性：

border：边框，像素值

width：表的宽度

align：表格对齐方式

bgcolor：背景颜色

tr 的常用属性：align：内容对齐方式

td 的常用属性：

align：内容对齐

colspan：跨列合并，值：合并的列数，被合并的列就不要再写了

rowspan：跨行合并，值：合并的行数，被合并的行就不要再写了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<table border="1" width="40%" height="150px" align="center" bgcolor="#ffff00">
			<!--创建一个4行3列-->
			<tr>
				<td>11</td>
				<td>12</td>
				<td>13</td>
			</tr>
			<tr align="center">
				<td>21</td>
				<td>22</td>
				<td>23</td>
			</tr>
			<tr>
				<td>31</td>
				<td align="center">32</td>
				<td>33</td>
			</tr>
			<tr>
				<td>41</td>
				<td>42</td>
				<td>43</td>
			</tr>
		</table>
		
		<hr />
		<table border="1" width="40%" height="150px" align="center" >
			<!--创建一个4行3列-->
			<tr>
				<td>11</td>
				<td>12</td>
				<td>13</td>
			</tr>
			<tr align="center">
				<td>21</td>
				<td colspan="2">22&23</td>			
			</tr>
			
			<tr>
				<td rowspan="2">31&41</td>
				<td align="center">32</td>
				<td>33</td>
			</tr>
			<tr>			
				<td>42</td>
				<td>43</td>
			</tr>
		</table>
	</body>
</html>

8.表单标签

<form> </form>用来从浏览器端收集用户的信息。常用属性：

action：设置信息提交路径，”#”表示提交到当前页面

method：提交方式，get和post，后序会详细介绍。

常见的子标签：input，select，textarea

1）input属性

type属性：

文本框:
<input type=”text”/>
   name
   value
   size
   maxlength
   readonly
密码框：
<input type=”password”/>
单选按钮：
<input type=”radio” checked="checked"/>
   Checked：默认选中
复选框
<input type=”checkbox”/>
   Checked：默认选中
文件上传项
<input type=”file” name=”file”/>
提交按钮
<input type=”submit” value=”注册”>
重置按钮
<input type=”reset” value=”重置”>
普通按钮
<input type=”button” value=”普通按钮”>
隐藏字段
<input type=”hidden” name=”id”/>
图片提交
    image

name属性：

1.要把表单里的信息提交到服务器，必须要有name属性，例如name=”sex” value=”1”；即sex=1;

2.如果需要将单选框或者复选框设置为一组，则标签需要有一样的name值。例如实际中sex有且只能选择一个值，因此必须设置为一组，否则会出现既可以是男的也可是女的。

2）select标签

<select name="" selected="selected">
    <option value="提交到服务器的值">展示内容</option>
</select>

3）textarea：文本域

<textarea cols=" " rows=" " name=" "> </textarea>

4）设置默认值方法

text：直接在<>和<>中间输入文字

input、password：设置value属性

radio、checkbox：设置checked="checked"属性

select：在option上设置selected="selected"属性

value可以设置button的展示文字

5）readonly 、disabled：

readonly="readonly" 只读，无法更改值

disabled="disabled" 禁用，相应的项会变成灰色

<input type=”text” readonly="readonly"/>

9.frameset

常用属性：cols：垂直切割、rows：水平切割

cols="40%,60%"

cols="40%,*,10%"，设定了第一和第三部分的百分比，剩下的直接用*表示。

常见的子标签：frame，frame常用属性：

src：展示的页面的url

<frameset rows="18%,*,10%">//将整个页面切成三个部分
    <frame src="./head.html"/>//第一部分
    <frameset cols="20%,*">//第二部分
        <frame src="left.html"/>
        <frame src="main.html" name="mainFrame"/> //设置name属性，是为了让其他的链接在这里打开（<a href="rygl.html" target="mainFrame">人员管理</a>，此时点击人员管理，新的页面将会在mainFrame这个框架内打开）
    </frameset>//第三部分
        <frame src="foot.html"/>
    </frameset>
</frameset>

10.转义字符

>       &gt;  //great than
<       &lt;
&       &amp;
空格    &nbsp;

闲人勿-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录