3 html基础总结

最新推荐文章于 2024-03-23 23:23:53 发布

火星人有可乐

最新推荐文章于 2024-03-23 23:23:53 发布

阅读量272

点赞数

文章标签： HTML 新手

本文链接：https://blog.csdn.net/hxrykl/article/details/97631541

版权

本章内容只是对HTML简单的概括，多少会有表述缺漏，更多细节还得读者另行翻阅其他资料

一、思维导图

先来一张图走进科学，哈哈哈哈
想要保存图片到本地，在图片上右击去保存即可
HTML个人总结

二、HTML（超级文本标记语言）

1.结构

<!DOCTYPE html>                    <!--声明部分-->                  
<html lang="en">                   <!--HTML开始标签--> 
	<head>						   <!--头部开始标签--> 
		<meta charset="UTF-8">     <!--用于设置元信息,配置:charset=utf-8-->
		<title>结构</title>		   <!--网页标题--> 
		<style></style>            <!--css样式--> 
	</head>                        <!--头部结束标签-->
	<body>                         <!--主体开始标签--> 
		<div id="one"></div>       <!--网页元素--> 
	</body>                        <!--主体结束标签--> 
</html>                            <!--HTML结束标签-->

2.网页元素

（1）注释

css里的注释/*这里写注释*/

HTML里的注释

（2）属性（属性名不区分大小写）

认识<div class="one"></div>其中属性名是class 属性值是one
使用
html

    <div id="one"></div>
	<div class="two"></div>
	<div style="width:100px;height:200px;"></div>

css：这里的width是css的属性，100px是值。#one是选择器，width:100px;是一个声明。

		#one{
			width: 100px;
			height: 100%;
		}
		.two{
			width: 50px;
			height: auto;
		}

3.1核心属性（绝大多数标签可用的属性）

id、class、style

3.2特有属性（某些标签特有）

例如：a标签的href、target
img标签的src、alt

3.3H5拓展属性

data-xxx

<div data-one="one"></div>

（3）元素

1.1块元素

特点：独占一行空间，默认宽100%，高由内容或子元素决定，也可指定宽高值。合适做页面框架或容器。
演示：

   <div>块元素</div>
	<div>块元素</div>
	<div>块元素</div>
	<span>行内元素</span>
	<span>行内元素</span>
	<span>行内元素</span>

在这里插入图片描述

div：无自带属性；
h1~h6（1-6级标题标签）：自带font-size、font-weight、margin属性；
p(段落标签)：自带margin属性
ul(无序列表)li(列表项)：自带margin、padding、list-style属性。
ol(有序列表)li
dl(有序列表)dt（列表标题）dd(列表内容)：自带margin

H5新增块元素：与div一样无样式

header（头）、
nav（导航）、
article（主体）、
section（部分）、
footer（脚）、
aside（附属）。

1.2行内元素

特点：与其他行内元素共享一行，宽高由内容决定，且不能指定宽高，不能內嵌块元素，用于点缀网页、填充内容，行内元素不能去设置width：100%；height:100%;去同父元素一样大，img除外。

a（超链接）：自带样式color、text-decoration（字体装饰）、cursor（规定光标显示形状）；特有属性：herf{值：URL（“”）/相对路径/绝对路径/锚点/mailto(发邮件)}、target{值：_blank(新建窗口打开)/_self(同窗口打开)}。
img(图片)：{src=‘url/相对路径/绝对路径’、alt=‘找不到图片时替换的文本’ 、width:100%；根据父元素决定}
注：图片和背景图片的区别背景图片作为底色可以去覆盖元素，而图片一般不在其上覆盖元素，图片作为元素，而背景图片不作为元素。
span:没有自带属性。
strong（强调-粗体）
bold（强调-粗体）
b（强调-粗体）
i（强调-斜体）
em（强调-斜体）
textarea（多行文本）
input（文本框）
select（下拉列表）
u(下划线)

1.3功能元素

特点：既不是行内元素也不是块元素，因为table和form里面都含有块级元素和行内元素，有点缀网页作用。

table(表格):
例子：

<table class="tbl">
		<caption>学生信息表</caption>
		<thead>
			<tr>
				<th>编号</th>
				<th>姓名</th>
				<th>性别</th>
				<th>手机号</th>
				<th width="100">操作</th>
			</tr>
		</thead>
		<!-- tbody不能缺省 -->
		<tbody>
			<tr>
				<td rowspan="2">1</td>
				<td>terry</td>
				<td>male</td>
				<td>18812344321</td>
				<td>
					<a href="">删除</a>
					<a href="">修改</a>
				</td>
			</tr>
			<tr>
				<td>terry</td>
				<td>male</td>
				<td>18812344321</td>
				<td>
					<a href="">删除</a>
					<a href="">修改</a>
				</td>
			</tr>
			<tr>
				<td>3</td>
				<td>terry</td>
				<td>male</td>
				<td>18812344321</td>
				<td>
					<a href="">删除</a>
					<a href="">修改</a>
				</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="5" align="right">合计1人</td>
			</tr>
		</tfoot>
	</table>

在这里插入图片描述

caption(表格标题)
thead(表头部分)
tbody(表格主体)：>tr(行)>th(粗体居中，)/td(列)
tfoot(表底部分)

form(表单)：用于前后台交互，参数：action(后台接口地址)、method(请求方式)=‘get/post’、enctype(编码方式)=‘’。
例子：

<form action="http://***" method="post" enctype="multipart">
	<table>
		<tbody>
		     <!-- 用户名 -->
			<tr>
			    <td>用户名</td>
				<td><input type="text" name="username"></td>
			</tr>
			<!-- 密码 -->
			<tr>
				<td>密码</td>
				<td><input type="text" name="password"></td>
			</tr>
			<!-- 真实姓名 -->
			<tr>
				<td>真实姓名</td>
				<td><input type="text" name="nickname"></td>
			</tr>
			<!-- email -->
			<tr>
				<td>邮箱</td>
				<td><input type="text" name="email"></td>
			</tr>
			<!-- 性别 -->
			<tr>
				<td>性别</td>
				<td>
				    <label for="gender_male">
				    	<input type="radio" name="gender" value="male" checked="checked">男
				    </label>
					<label for="gender_famale">
						<input type="radio" name="gender" value="famale">女
					</label>
				</td>
			</tr>
			<!-- 爱好 -->
			<tr>
			    <td>爱好</td>
				<td>

					<label for="">
						<input type="checkbox" name="sing" >唱
					</label>
					<label for="">
						<input type="checkbox" name="dance" >跳
					</label>
					<label for="">
						<input type="checkbox" name="say" >rap
					</label>
				</td>
			</tr>
			<!-- 注册 -->
			<tr>
				<td colspan="2">
					<input type="submit" value="注册">
				</td>
			</tr>
		</tbody>
	</table>
</form>

在这里插入图片描述

input:{name(必有，作为参数识标)、value(默认值)、type（text：单行文本/password:密码框/submit:提交按钮/file:附件选择器/radio:单选按钮/checkbox:复选按钮）不同的值决定input的形式、placeholder(提示语)、checked(单选默认)}
label:为input提供标记for=“”
select（菜单）>option（菜单项）{value=“定义识标”}
textarea(多行文本域){placeholder=‘提示语’}