【JavaWeb】01 html简介，常用标签

最新推荐文章于 2023-05-06 14:51:06 发布

啊这就离谱

最新推荐文章于 2023-05-06 14:51:06 发布

阅读量364

点赞数

分类专栏： JavaWeb 文章标签： web java

本文链接：https://blog.csdn.net/JennyTheArtist/article/details/105529343

版权

JavaWeb 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

1. html简介

全称：HyperText Markup Language，是一种超文本标记语言，网页语言。
文件后缀：html、htm
直接通过浏览器就能运行

2. 规范

一个html开始和结束的标签：<html>和</html>
<head>设置相关内容</head>
<body>显示在页面上的内容</body>
html标签大多成对出现。部分标签没有结束标签，在本标签内结束，如：换行：<br/>，水平分割线：<hr/>

3. 常用标签

文字标签

格式：<font>文字内容</font>
属性：
1. 字体大小size：1-7，超过7的按7计
2. 文字颜色color：两种表示方式。英文单词：<font color="red">；十六进制（使用工具参考颜色对应的十六进制）：<font color="#ffffff">

注释标签

格式：

标题标签

格式：一级标题<h1>标题</h1>，二级标题<h2>标题</h2>…一共六级标题，大小依次变小，标题标签会自动换行。

水平线标签

格式：<hr/> (horizontal rule)
属性：
1. size ：线的粗细 1-7
2. color：与文字标签相同
如<hr size="3" color="yellow"/>

特殊字符

部分特殊字符需要转义，如：

字符	转义
<	`<`
>	`>`
空格	` `
&	`&`

列表标签

想要显示这样的效果：

收废品
	 收冰箱
	 收彩电
	 收手机

代码：

<dl>
	<dt>收废品</dt>
	<dd>收冰箱</dd>
	<dd>收彩电</dd>
	<dd>收手机</dd>
</dl>

格式：
列表范围：<dl></dl> (definition list)
上层内容：<dt></dt> (top)
下层内容：<dd></dd> (down)

想要显示这样的效果：

1.阿嬷                 或者：a.		i.
2.网吧					    b.		ii.
3.杰哥家				        c. 		iii.

代码：

<ol>
	<li>阿嬷</li>
	<li>网吧</li>
	<li>杰哥家</li>
</ol>

格式：
有序列表范围：<ol></ol> （organized list）无序列表：<ul></ul>
列表内容：<li></li> （list item）
属性：序号形式 type="1”（默认）或"a"或"i"

图像标签

格式：<img src="图片的路径"/>
属性：
1. 路径：src
2. 宽、高：width，height
3. 图片上显示的文字：alt（鼠标移动到图片上片刻后显示，有的浏览器无法显示）

路径的表示：
1. 绝对路径：文件的完整路径
2. 相对路径：图片文件相对于html文件的路径
图片与html在同目录下：图片.jpg；
图片在html下层目录：同级文件夹/图片.jpg；
图片在html上层目录：…/图片.jpg

超链接标签

格式：<a href="打开的地址"></a> 地址为“#”时没有链接效果
属性：
1. href：链接地址
2. target：页面打开方式。_blank：在空页面打开。_self：在当前页打开（默认）。

表格标签（重要！)

格式：
1. 表格范围<table></table>
2. 标题：<caption></caption>
3. 一行：<tr></tr>
4. 每格：<td></td> ,加粗和居中

<table>的属性：
1. border：表格线的粗细
2. bordercolor：表格线颜色
3. cellspacing：单元格间距离
4. width，height：表格的宽和高
如，代码：<table border="1" bordercolor="blue" cellspacing="0" width="200" height="150">

<td>属性：
1. 对齐方式 align：left center right
2. 合并单元格：跨行：rowspan 跨列：colspan
3. bordercolor：每个单元格边框的颜色

技巧：先数多少行，再数每行多少单元格

代码：

<table border="1" bordercolor="#66ff66" cellspacing="0" width="400" height="150"> 
 <tr>
 	<td bordercolor="#66ff66" align="center" rowspan="3">节日</td>
 	<td bordercolor="#66ff66" align="center">1月1日</td>
	<td bordercolor="#66ff66" align="center">元宵节</td>
	<td bordercolor="#66ff66" align="center">1天</td>
 </tr>
  <tr>
 	<td bordercolor="#66ff66" align="center">5月1日</td>
	<td bordercolor="#66ff66" align="center">劳动节</td>
	<td bordercolor="#66ff66" align="center">3天</td>
 </tr>
  <tr>
 	<td bordercolor="#66ff66" align="center">10月1日</td>
	<td bordercolor="#66ff66" align="center">国庆节</td>
	<td bordercolor="#66ff66" align="center">7天</td>
 </tr>
 <table>

得到：
表格标签

表单标签（重要！！）

可以通过表单标签提供数据到服务器。

格式：
1. 定义表单范围：<form></form>
-属性：action：提交到的地址，默认为当前页面
method：有get和post两种
enctype：文件上传时需要用到的属性

题目：get和host的区别
	1.get请求地址栏会携带提交的数据，host不会携带
	2.因此，host请求安全级别更高
	3.get有请求数据大小的限制，host无限制

2.输入项：可以输入或选择内容的部分。大部分输入项使用<input type="输入项的类型"/>。输入项需要name属性。

普通输入项：<input type="text"/>
密码输入项：<input type="password"/>
单选输入项：<input type="radio"/> 需要有value。name属性值相同
默认选中的属性 checked=“checked”
多选输入项：<input type="checkbox"/> 需要有value属性。name属性值相同
默认选中的属性 checked=“checked”
文件输入项：<input type="file"/>
下拉输入项：范围 <select></select> ；每个选项 <option></option>
文本框：范围 <textarea></textarea>；行列 rows="10" cols="10"
隐藏项（不会存在于页面）：<input type="hidden"/>
提交按钮：<input type="submit" value="按钮上的文字">
使用图片提交：<input type="image" src="图片路径">
重置按钮：<input type="reset"/>
普通按钮：<input type="button" value=""/>

代码：

<h2 align="center">网课学习调查</h2>
<form action="文字标签.html">
<table align="center">
<tr>
	<td align="right">姓名:</td>
	<td name="name"><input type="text"/></td>
</tr>
<tr>
	<td align="right">性别：</td>
	<td ><input type="radio" name="sex" value="male"/ checked="checked">男
    <input type="radio" name="sex" value="female"/>女</td>
</tr>
<tr>
	<td align="right">网课设备：</td>
	<td><input type="checkbox" name="device" value="com"/>电脑
	<input type="checkbox"name="device" value="pho"/>手机
	<input type="checkbox"name="device" value="pad"/>平板</td>
</tr>
<tr>
	<td align="right">我是：</td>
	<td>
	<select name="grade">
	<option value="2020">2020届</option>
	<option value="2021">2021届</option>
	<option value="2022">2022届</option>
	<option value="2023">2023届</option>
	</select>
	</td>
</tr>
<tr align="center">
	<td colspan="2" ><input type="submit" value="提交"/></td>					</tr>
</table>
</form>

在这里插入图片描述

提交后地址栏：file:///E:/EditPlus中文版/day1-5/文字标签.html?sex=male&device=com&grade=2021
可以看出表单是以类似key-value键值对的形式提交的。

其他标签的使用

b：加粗
s：删除线
i：斜体
u：下划线
pre：原样输出
sub：下标
sup：上标
p：段落标签，比br/多一行
div：自动换行
span：在一行中显示

头标签（head）

title：在标签上显示的内容
meta：设置页面的相关内容。有跳转时间等可以设置。
base：设置超链接基本信息。避免每条链接都设置一次。base target="_blank"
link：可以引入外部文件

框架标签（会用即可）

frameset：
属性：

rows：按照行进行划分 <framset rows="80,*"> （上半部分80行，余下的是下半部分）
cols：按照列进行划分 <framset cols="20,*">
frame：具体显示的页面<frame name="名称" src="引入的页面路径">

使用框架标签时，不能写在body里，需要去掉body

啊这就离谱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【JavaWeb】01 html简介，常用标签

1. html简介全称：HyperText Markup Language，是一种超文本标记语言，网页语言。文件后缀：html、htm直接通过浏览器就能运行2. 规范一个html开始和结束的标签：<html>和</html><head>设置相关内容</head><body>显示在页面上的内容</body>...
复制链接

扫一扫