（一）HTML-CSDN博客

本文链接：https://blog.csdn.net/weixin_44771551/article/details/108582255

（一）HTML

一、HTML简介

（1）什么是HTML

HTML全称：Hyper Text Markup Language(超文本标记语言)

超文本：页面内可以包含图片、链接，甚至音乐、程序等非文字元素
标记：标签，不同的标签实现不同的功能
语言：人与计算机的交互工具

（2）HTML能做什么

HTML主要用来展示信息给用户和收集用户信息

（3）HTML书写规范

（1）以尖括号包围的关键字
（2）成对出现，有开始就有结束
（3）有属性，格式：属性 = “ 属性值 ” （多个属性之间用空格隔开）
（4）不区分大小写，建议全小写

二、HTML基本标签

（1）结构标签

<html> <!--根标签-->
    <head> <!--头部标签-->
   		<title></title> <!--页面标题--> 
    </head>
    <body></body> <!--网页正文-->
</html>

（2）排版标签

（1）注释标签：<!--注释-->
（2）换行标签：<br/>
（3）段落标签：<p>文本文字（有换行）</p>
（4）水平线标签:<hr/>
（5）块级标签（自带换行）：h1-h6，p等
（6）行级标签（不带换行）：img等
（7）空格：&nbsp;

（3）块标签

（1）<div></div>：行级块标签，独占一行，换行
（2）<span></span>：行内块标签，所有内容都在同一行

（4）标题标签

h1 ~ h6，h1最大，h6最小

（5）列表标签

（1）无序列表：<ul></ul>
	<ul type="circle">
    	<li></li>
	</ul>
	<!--type的属性值有：circle（空心圆）、disc（实心圆）、square（黑色方块）-->
	<!--一级列表默认为实心圆，二级列表默认为空心圆-->
	
（2）有序列表：<ol></ol>
	<ol type="a" start="1">
		<!--start="1"：表示小写字母从第一个开始-->
    	<li></li>
	</ol>
	<!--type的属性值有：阿拉伯数字（1、2...）、字母（A、a）、罗马数字（I、i）-->
	
（3）自定义列表：<dl></dl>
	<dl>
		<dt>一级内容</dt>
        <dd>二级内容</dd>
	</dl>
	
（4）列表的嵌套使用：无序列表与有序列表相互嵌套使用
	<ol>
		<li></li>
        <li>
			<ol>
				<li></li>
			</ol>
		</li>
        <li>
        	<ul>
                <li></li>
            </ul>
        </li>
	</ol>

（6）图形标签

<img />：在页面指定位置处引入一张图片
<!--属性有：src（引入图片的路径），widht（图片的宽度），height（图片的高度）...等-->

（7）链接标签

<a href=""></a>：在页面中使用链接标签跳转到另一页面
<!--
属性：
	href：跳转页面的地址（跳转到外网需要添加协议）
	target：设置跳转页面时的页面打开方式（_blank在新窗口打开，_self在原窗口打开）
	...等
-->
指向同一页面中指定位置（锚点链接）：
	定义位置：<a name="名称"></a>
	指向：<a href="#名称"></a>

（8）表格标签

<table>
<!--
table属性：
	border：表格外边框粗细
	cellspacing：单元格与单元格的间距
    cellpadding：单元格与内容的间距
    ...等
-->
	<tr>行
		<th>列标题</th><!--内容有加粗和居中效果-->
		<td>列</td>
		<td rowspan="2">行合并</td><!--在同一行内同时合并多个列-->
		<td colspan="2">列合并</td><!--在同一列跨多行合并-->
	</tr>
</table>

三、HTML表单

（1）、form元素

action表示动作，值为服务器的地址，把表单的数据提交到该地址上处理

method:请求方式：get 和post

get：
地址栏，请求参数都在地址后拼接 path?name=“张三”&password=“123456”
不安全
效率高
get请求大小有限制，不同浏览器有不同，但是大约是2KB；一般情况用于查询数据

post：
地址栏：请求参数单独处理。
安全可靠些
效率低
post请求大小理论上无限；一般用于插入删除修改等操作

enctype：表示是表单提交的类型

默认值：application/x-www-form-urlencoded 普通表单
multipart/form-data 多部分表单（一般用于文件上传）

（2）、input元素

作为表单中的重要元素，可根据不同type值呈现为不同的状态；

用法：< input type = " 属性值 " />

属性值	描述	属性值	描述
text	单行文体框	file	文件上传
password	密码框	hidden	隐藏域
radio	单选按钮	range	取值范围
checkbox	复选框	color	取色按钮
date	日期框	submit	表单提交按钮
time	时间框	button	普通按钮
datetime	日期和时间框	reset	重置按钮
email	电子邮件输入	image	图片提交按钮
number	数值输入

（3）、select 元素（下拉列表）

<select><!--多选列表：multiple="multiple"-->
	<option selected="selected">1</option><!--默认选中属性：selected="selected"-->
	<option>2</option>
	<option>3</option>
</select>

（4）、textarea元素（文本域）

多行文本框：< textarea cols=“列” rows=“行”>< /textarea>

（5）案例演示：

<body>
    <form>
        姓名：
        <input type="text">
        <br/><br/>
        性别：
        <input type="radio" name="sex">男
        <input type="radio" name="sex">女
        <br/><br/>
        爱好：
        <input type="checkbox">篮球
        <input type="checkbox">羽毛球
        <input type="checkbox">乒乓球
        <br/><br/>
        出生日期：
        <input type="date">
        <br/><br/>
        学历：
        <select>
            <option>高中</option>
            <option>大专</option>
            <option>本科</option>
            <option>硕士</option>
        </select>
        <br/><br/>
        留言：
        <textarea rows="5" cols="50"></textarea>
    </form>
</body>

案例演示

四、HTML框架标签

（1）框架结构标签：frameset

框架结构标签< frameset>< /frameset>用于定义如何将窗口分割为框架
属性rows为行，cols为列，noresize为固定区域大小
注意：不允许和body标签同时使用

（2）框架标签：frame

每个frame引入一个html页面

<frameset cols="50%,*"><!--“ 50% ”为左边占一半的宽度，“ * ”为右边占剩下的宽度-->
    <frame src="index1.html" noresize="noresize" />
    <frame src="index2.html" />
</frameset>

五、引入css和js的文件地址

<!--href：引入css的文件地址-->
<link rel="stylesheet" type="text/css" href="../css/style.css">

<!--src：引入js的文件地址-->
<script type="text/javascript" src="../js/index.js"></script>