HTML

最新推荐文章于 2024-07-25 11:52:08 发布

YooFale

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量159

点赞数

分类专栏：前端文章标签： html

博主原创，转发请私信。

本文链接：https://blog.csdn.net/YooFale/article/details/83111129

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.语法规范

<!DOCTYPE html>
<!--
	1.上面是一个文档声明
	2.根标签为html
	3.html文件包含两部分：头部分和体部分
	头部分：放置一些页面信息
	体部分：放置HTML页面内容
	4.通过标签来对内容进行描述，标签通常由开始标签和结束标签组成
	5.标签不区分大小写，一般小写
-->
<html>
	<head>
		<!--指定浏览器打开页面的编码方式-->
		<meta charset="utf-8" />
		<!--指定网站标题-->
		<title>入门案例</title>
	</head>
	<body>
		Hello World！
	</body>
</html>

html是解释性语言，由浏览器进行解析。

2.标签

b:加粗

i:斜体

Strong ：加粗, 带语义标签

em：斜体, 带语义

p：段落

hr：分割线

font：字体 color颜色 size字体大小，1-7，编号越大字体越大 face选择字体

h：标题。编号越小字体越大1-6

img：src路径 width 宽度 height高度 alt无法显示出现的内容

3.文件路径问题

./：当前路径

../：上一级路径

../../：上上一级路径

4.列表

无序列表: ul

type: 小圆圈,小圆点, 小方块

有序列表: ol

type: 1，a ，A，i，I

start : 指定是起始索引

5.超链接

a标签

href: 指定要跳转去的链接地址

如果是网络地址需要加上http协议 ,

如果访问的是本网站的html文件,可以直接写文件路径

target : 以什么方式打开

_self: 默认打开方式,在当前窗口打开

_blank: 新起一个标签页打开页面

6.表格标签

table标签

tr行 td列

border : 指定边框
                   width :    宽度
                   height :    高度
                   bgcolor:   背景色
                   align   : 对齐方式 table添加是整个边框在网页的位置变为居中 tr添加是整行内容在表格内居中显示 td添加是居中

表格的合并

colspan:跨列操作

rowspan:跨行操作

说明：合并以后，原先表格对应位置的单元格要删除，不然会把其他单元格挤出去

案例代码：

<table border="1px" width="400px">
			<tr>
				<td colspan="2">11</td>
			
				<td>13</td>
				<td>14</td>
			</tr>
			<tr>
				<td>21</td>
				<td colspan="2" rowspan="2">22</td>
				
				<td>24</td>
			</tr>
			<tr>
				<td>31</td>
				
				<td>34</td>
			</tr>
			<tr>
				<td>41</td>
				<td>42</td>
				<td>43</td>
				<td rowspan="2">44</td>
			</tr>
			<tr>
				<td>51</td>
				<td>52</td>
				<td>53</td>
				
			</tr>
		</table>

表格的嵌套

将上述代码的22换为

<table border="1" width="100%">
						<tr>
							<td>1</td>
							<td>2</td>
							<td>3</td>
						</tr>
						<tr>
							<td>1</td>
							<td>2</td>
							<td>3</td>
						</tr>
					</table>

即可在原22位置嵌套一个小的表格

7.表单

表单标签
               action : 直接提交的地址

               method :
                       get 方式默认提交方式 ,会将参数拼接在链接后面 , 有大小限制 ,4k
                       post 方式会将参数封装在请求体中, 没有这样的限制


input :
type: 指定输入项的类型
                   text : 文本
                   password : 密码框
                   radio :       单选按钮
                   checkbox : 复选框
                   file    : 上传文件
                   submit : 提交按钮
                   button    : 普通按钮
                   reset   : 重置按钮
                   hidden : 隐藏域
datetime-local：日期
                   date : 日期类型
                   tel : 手机号
                   number : 只允许输入数字
placeholder : 指定默认的提示信息
name : 在表单提交的时候,当作参数的名称
id : 给输入项取一个名字, 以便于后期我们去找到它,并且操作它

textarea : 文本域, 可以输入一段文本
                       cols : 指定宽度
                       rows : 指定的是高度

select : 下拉列表
option : 选择项

8.框架

frameset标签，内部放frame，且有frameset就没有body

cols，rows则分别是纵向，横向划分。

frame的name属性，可用于定义跳转到指定frame标签进行显示。

框架代码：

<frameset rows="15%,*">
		<frame src="aaa.html" />
		<frameset cols="15%,*">
			<frame src="bbb.html"/>
			<frame src="ccc.html" name="rightFrame"/>
		</frameset>
	</frameset>

bbb中：

<body bgcolor="pink">
		<a href="data.html" target="rightFrame">收件箱</a><br />
		<a href="#">发送箱</a><br />
		<a href="#">垃圾箱</a><br />
	</body>

YooFale

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML

1.语法规范&lt;!DOCTYPE html&gt;&lt;!-- 1.上面是一个文档声明 2.根标签为html 3.html文件包含两部分：头部分和体部分头部分：放置一些页面信息体部分：放置HTML页面内容 4.通过标签来对内容进行描述，标签通常由开始标签和结束标签组成 5.标签不区分大小写，一般小写--&gt;&lt;html&gt; &lt;head&gt;...
复制链接

扫一扫

专栏目录