Web知识整理01

最新推荐文章于 2022-06-01 22:32:41 发布

lao_kai_ybqy

最新推荐文章于 2022-06-01 22:32:41 发布

阅读量230

点赞数

分类专栏：网页设计文章标签： html html5

本文链接：https://blog.csdn.net/weixin_47701814/article/details/108588988

版权

网页设计专栏收录该内容

11 篇文章 0 订阅

订阅专栏

Web知识整理

html

(HyperText Markup Language)
超文本标记语言，标准通用标记语言下的一个应用。 “超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。(来自360百科).

html基本标签

注释符号
ctrl+/为注释快捷键
标题标签< h1 > </ h1 > 数字可取1-7 1为最大
水平分割线 < hr/ >
换行< br/ >
段落标签 < p > < /p > 末尾自动换行
修饰标签< font >< /font >
font格式标签常用属性 color:颜色 size: 大小 face:字体
加粗标签< b > < /b > 或者< strong >< /strong >这是一个语义标签
斜体标签< i > < /i >或者< em >< /em >这是一个语义标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1>哈哈哈 </h1>
		<h2>嘿嘿嘿 </h2>
		<h3>吼吼吼 </h3>
		<hr/><!--这是水平分割线-->
		123<br/>456<!--换行演示-->
		<br/>
		AA<b>AA</b><i>AA</i>
		<hr/>
		BB<strong>BB</strong><em>BB</em>
		<p>这是一个段落</p>
		<font color="yellowgreen" size="6" face="微软雅黑">zkr6666</font><!--格式标签演示-->
	</body>
</html>

代码实现效果
在这里插入图片描述

图片img基本标签

src:指定图片路径 ./表示当前路径…/表示上一路径…/…/表示上上一路径
width:宽度
height:高度
alt:图片加载失败是的提示信息

<img src="../../img/mn1.jpg" width="300px" height="500px" alt="这张图片有问题" />

列表与超链接标签

ul:无序列表 type改变列表前的小圆圈
ol:有序列表 type改变排列的方式 strat改变初始值
li:列表项
a:超链接标签: href:要访问的链接地址 target:打开方式(_self当前页面打开或 _blank新建页面打开)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<ul type="circle">
			<li><a href="http://www.baidu.com">百度</a></li>
			<li><a href="../../img/mn4.jpg">图片</a></li>
			<li><a href="https://blog.csdn.net/weixin_47701814">CSDN</a></li>
		</ul>
		<ol type="1">
			<li>我</li>
			<li>你</li>
			<li>他</li>
		</ol>
	</body>
</html>

在这里插入图片描述

表格标签

< table >< /table > 定义表格
table属性：
border边框宽度 bordercolor 边框颜色 bgcolor 表格背景颜色 align 表格对齐方式 width表格宽度 height 表格高度
< th >< /th > 定义表格中的表头单元格
< tr >< /tr > 定义表格中的行
< td >< /td > 定义表格中的单元/列
表格的合并：colspan跨列合并 rowspan跨行合并
合并后需要给原来的空间给删除

<table border="5px" width="500px" height="100px" bordercolor="yellowgreen" align="center">
			<tr>
				<td bgcolor="yellowgreen" align="center">2</td>
				<td>3</td>
				<td rowspan="2">哈哈哈哈</td>
			</tr>
			<tr>
				<td colspan="2" align="center">嘿嘿嘿</td>
			</tr>
			<tr>
				<th>
					H
				</th>
			</tr>
		</table>

在这里插入图片描述
表格嵌套效果 width=100%自动填满边框的宽 height同理

<table border="5px" width="500px" height="100px" bordercolor="yellowgreen" align="center">
			<tr>
				<td bgcolor="yellowgreen" align="center">2</td>
				<td>3</td>
				<td rowspan="2"colspan="2">
					<table border="1px" bordercolor="red" width="100%" height="100%">
						<tr>
							<td align="center">哈</td>
							<td align="center">哈</td>
							<td align="center">哈</td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center">嘿嘿嘿</td>
			</tr>
			<tr>
				<th>
					H
				</th>
			</tr>
		</table>

在这里插入图片描述

注册页面

创建表格在表格中建立行列
创建行< tr >< /tr >
输入标签 input 属性 type:输入形式 placeholder 输入的提示信息
type 类型 :
1.text 例如:用户名个性签名
2.password 例如:密码确认密码
3.email 例如:邮箱
4.radio 例如:多选兴趣,也可以命名一个name类
5.date 例如:生日
6.submit 例如:最后的提交按钮其中包括value属性为按钮名
7.tel 例如:手机号码
8.number 只能输入数字

代码演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<table align="center" width="100%" height="100%">
		<tr>
			<td background="../../img/mn8.jpg" height="500px">
				<table border="5px" width="60%" height="80%"bgcolor="white" align="center">
					<tr>
						<td>
							<table  height="90%" width="100%">
								<tr>
									<td colspan="2" align="center"><font color="#ADFF2F" size="5">会员注册 </font> HHHHH</td>
								</tr>
								<tr>
									<td>用户名:</td>
									<td>
										<input type="text" placeholder="请输入用户名"/>
									</td>
								</tr>
								<tr>
									<td>密 码:</td>
									<td>
										<input type="password" placeholder="请输入密码"/>
									</td>
								</tr>
								<tr>
									<td>确定密码:</td>
									<td>
										<input type="password" placeholder="请确认密码"/>
									</td>
								</tr>
								<tr>
									<td>Email:</td>
									<td>
										<input type="text" placeholder="请输入邮箱"/>
									</td>
								</tr>
								<tr>
									<td>姓 名</td>
									<td>
										<input type="text" placeholder="请输入姓名"/>
									</td>
								</tr><tr>
									<td>性别</td>
									<td>
										<input type="radio" name="sex"/> 男人
										<input type="radio" name="sex"/> 女人
										<input type="radio" name="sex"/> 外星人
									</td>
								</tr>
								<tr align="center">
									<td  colspan="2" align="center">
										<input type="submit" value="注册"  />
									</td>
								</tr>
							</table>
						</td>
					</tr>
				</table>
				
			</td>
		</tr>
	</table>
	</body>
</html>

在这里插入图片描述
确实有点丑，经过后面的学习会有优化的css，到时候就是我又行了
这个先到这吧
Web_01链接
 Web_02链接
 Web_03链接
 Web_04链接
 Web_05链接
 Web_06链接

lao_kai_ybqy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web知识整理01

Web知识整理html(HyperText Markup Language)超文本标记语言，标准通用标记语言下的一个应用。 “超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。(来自360百科).html基本标签注释符号ctrl+/为注释快捷键标题标签< h1 > </ h1 > 数字可取1-7 1
复制链接

扫一扫

专栏目录