3 html基础总结

本章内容只是对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=‘提示语’}

3.开发流程

(1)编写网页
(2)本地测试
(3)部署:将项目上传到服务器,并并部署到apache.
(4)网络测试

©️2020 CSDN 皮肤主题: 创作都市 设计师:CSDN官方博客 返回首页