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