HTML入门

最新推荐文章于 2024-05-24 00:36:19 发布

Lucifer-KH

最新推荐文章于 2024-05-24 00:36:19 发布

阅读量49

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_41229365/article/details/128907633

版权

HTML入门学习

原视频地址

一.HTML基本标签

<!--HTML注释-->
<!doctype html>
<html>
	<head>
		<title>
		这是网页的标题
		</tiltle>
		<meta charset="UTF-8">
		浏览器采用何种字符集打开当前页面 而不是当前页面的编码方式
	</head>
	<body>
	网页的主体内容
	<!--段落标记-->
	<p>
	这是一段
	</p>
	<!--标题字是HTML预留的格式 h1 - h6 -->
	<h1></h1>
	<!--换行标签-->
	<br>
	<!--br是独目标记-->
	<hr color = "red"><!--hr也是独目标记 横线 color和width是hr标签的属性-->
	<pre>这是预留格式</pre>
	<del>删除字</del>
	<ins>插入字</ins>
	<b>粗体字</b>
	<i>斜体字</i>
	<sup>右上角加字</sup>
	<sub>右下角加字</sub>
	<font color="red">字体标签</font>
	</body>
</html>

二.HTML实体标签

实体符号的特点是以&开始以；结束

小于号&lt;
大于号&gt;
空格&nbsp;

三.HTML表格

表格组成：表格行单元格

<center><h1>信息列表</h1></center> 居中设置
设置表格边框为1像素
<table align="center" border = "1px" width="60%" height="150px">
	<tr align="center">
		<td align="center">
		</td>
	</tr>
</table>

关于相邻单元格合并

合并行的时候删掉下面的单元格将内容合并到一个单元格里面并设置 rowspan=“2”
合并列的时候两个列随便删除一个，因为两列在同一个里面，并设置colspan=“2”

注：<th></th>标签自动居中和加粗一般用于第一行

一个表格可以被切分为三部分 thead tbody tfoot标签,在body中不是必须的但是便于后期JS代码处理,将表格切分更好操作

对于单元格合并会有影响

四.背景色和背景图片

<html>
	<head>
		<title>
		这是网页的标题
		</tiltle>
		<meta charset="UTF-8">
		浏览器采用何种字符集打开当前页面 而不是当前页面的编码方式
	</head>
	<body bgcolor="red" background="一般写相对路径">
	背景色和背景图片 对背景进行设置
	图片铺不满会平铺 可以调节图片大小或者CSS
		<img src="" width="" title=""设置鼠标悬停的信息 alt=""图片加载失败显示的信息></img>
		换一种写法
		<img />如果两个标签之间没有内容可以采用这种写法
		
	</body>
</html>

五.超链接

<html>
	<head>
		<title>
		这是网页的标题
		</tiltle>
		<meta charset="UTF-8">
		浏览器采用何种字符集打开当前页面 而不是当前页面的编码方式
	</head>
	<body bgcolor="red" background="一般写相对路径">
		<a href="" targrt="_blank">
		targrt取值：
		_blank 新窗口
		_self 当前窗口
		_top 顶级窗口
		_parent 父窗口
		可以加图片<img></img>
		</a>
		可以是互联网路径也可以使本地资源的路径 相对路径和绝对路径都是可以的
	</body>
</html>

请求和响应

请求是向服务器发
响应是服务器向浏览器发
超链接是浏览器向服务器发送请求 request
服务器向浏览器发送数据 response

六.列表

无序列表

<ul type="" square circle disc>
	<li>
	</li>
</ul>

有序列表

<ol type="" 1 a A I i>
	<li>
	</li>
</ol>

七.表单初步

接收用户的信息用户填写表单点击提交按钮提交数据给服务器可以向服务器发送请求request 到机器某个端口对应的软件

<form action=""指定服务器地址>
	<input type="submit"具有提交表单的作用></input>
	<input type="button"普通按钮不具有提交表单的作用></input>
	<input type="radio" 单选框 value="按钮上显示的文本"></input>
	<input type="password"></input>
	<input type="reset" value=""清空></input>
</form>

超链接和表单都可以向服务器发送请求，区别是表单可以收集数据

表单提交数据给服务器的格式
action?name=value&name=value
这是HTTP协议规定的提交格式

表单项带有name属性都会提交给服务器
文本框和密码框的内容不需要指定
只有name没有value会提交空字符串

用户注册表单

采用post方式提交用户提交信息不会显示在地址栏 get方式会显示在地址栏 默认方式是get方式
<form action="服务器地址" method="post">
用户名
	<input type="text" name="username"/>
	<br>
	密码
	<input type="password" name="userpwd"/>
	<br>
	确认密码
	<input type="password"/>不需要提交给服务器
	<br>
	性别
	<input type="radio" name="gender" value="1" checked 默认选中/>男
	<input type="radio" name="gender" value="0"/>女
	单选按钮的value需要手动指定
	单选按钮
	<br>
	兴趣爱好
	<input type="checkbox"复选框 name="interest" value="tangtou"/>烫头
	<input type="checkbox" name="username" value="chouyan"/>抽烟
	<input type="checkbox" name="username" value="hejiu"/>喝酒
	默认选中需要加checked
	<br>
	学历
	<select name="grade">
		<option value="gz">高中</option>
		<option value="dz">大专</option>
		<option value="bk" selected>本科</option><!--默认选中-->
		<option value="ss">硕士</option>
	</select>
	<input type="text" name="username"/>
	<br>
	简介
	<textarea rows="10" cols="60" name="introdece"/>没有value属性
	<br>
	<input type="submit" value="注册"></input>
	<input type="button" value="清空"></input>
</form>

超链接也可以提交数据给服务器但是用户不能输入
提交格式相同
超链接是get请求不是post请求
会显示在地址栏

下拉列表支持多选

<select multiple="multiple" size="2">默认显示条目数量 需要按住control
	<option>高中</option>
	<option>大专</option>
	<option>本科</option>
	<option>硕士</option>
</select>

file控件

<input type="file"></input>文件上传专用

hidden控件

<form>
<input type="hidden" name="userid" value="1111"></input>
网页上看不见 但是表单提交的时候会自动提交给服务器 用户看不见
</form>

readonly 和 disabled

<form>
用户代码<input type="text" name="code" value="usercode" readonly>
<br>
用户姓名<input type="text" name="name" value="username" disabled>
<br>
</form>

相同点不可修改
readonly可以提交给服务器
但是disabled不可以

控件的maxlength属性

<input type="text" name="name" value="username" maxlength="3">

控制输入的字符串数量

八.HTML文档中的id属性

HTML文档中的任何结点都有id属性 id属性是结点的唯一标识在同一个html文档中id值不可以重复
表单提交的时候和id值没有关系只和name有关系

id的作用是为了更方便获取元素
JS可以对HTML文档中的任意节点实现增删改的操作
通过id拿到结点对象

<input type="text" id="username" name="name" value="username" maxlength="3">

HTML文档是一棵树
DOM树
对DOM树的结点进行增删改

九.div和span

作用是布局可以称为图层
保证页面可以灵活布局
最早是用table布局但是table太过于死板

div和span可以定位
定下div左上角的x轴和y轴坐标即可
默认情况下div会独占一行 span不会 div可以嵌套

<div id ="div1">我是一个div</div>