HTML学习笔记

最新推荐文章于 2023-01-12 15:14:08 发布

少年白马

最新推荐文章于 2023-01-12 15:14:08 发布

阅读量84

点赞数

本文链接：https://blog.csdn.net/qq_44833724/article/details/118346513

版权

网页编程设计

有序列表和无序列表

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="GB 2312">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签与下划线</title>
</head>

<body>
    <h2>无序列表</h2>
    <ul>
        <li>傻逼</li>
        <li>大傻逼</li>
        <li>超级无敌大傻逼</li>
    </ul>
    <!-- 默认是实心小黑圆点 -->
    <ul type="disc">
        <li>傻逼</li>
        <li>大傻逼</li>
        <li>超级无敌大傻逼</li>
    </ul>
    <!-- 实心方块 -->
    <ul type="square">
        <li>傻逼</li>
        <li>大傻逼</li>
        <li>超级无敌大傻逼</li>
    </ul>
    <!-- 空心圆 -->
    <ul type="circle">
        <li>傻逼</li>
        <li>大傻逼</li>
        <li>超级无敌大傻逼</li>
    </ul>


    <h2>有序列表</h2>
    <ol>
        <li>傻逼</li>
        <li>大傻逼</li>
        <li>超级无敌大傻逼</li>
    </ol>
    <ol type="1">
        <li>傻逼</li>
        <li>大傻逼</li>
        <li>超级无敌大傻逼</li>
    </ol>
    <ol type="A">
        <li>傻逼</li>
        <li>大傻逼</li>
        <li>超级无敌大傻逼</li>
    </ol>
    <ol type="a">
        <li>傻逼</li>
        <li>大傻逼</li>
        <li>超级无敌大傻逼</li>
    </ol>
    <ol type="I">
        <li>傻逼</li>
        <li>大傻逼</li>
        <li>超级无敌大傻逼</li>
    </ol>
    <ol type="i">
        <li>傻逼</li>
        <li>大傻逼</li>
        <li>超级无敌大傻逼</li>
    </ol>
</body>

</html>

实现效果

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Gf0UAOyk-1624982042017)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210612003233434.png)]$

div和span

div标签是属于层块元素，标签会自动换行，常用于布局，常用属性align div元素中内容的对齐方式

span标签：块，行内元素，标签不会自动换行

格式化标签

font

设置字体相关属性

常用属性：

color 字体颜色（颜色名，十六进制，rgb）

size字体大小

face 字体风格

pre 标签

定义预格式化文本，保留文本中的空格和换行，文本呈现等宽字体，也就是说文本是怎么样子的显示效果就是怎么样子的

a 标签（超链接a标签）

定义超链接，用于从一个页面链接到另外一个页面

行内元素，不会自动换行

常用属性：

href 必须属性（如果未设置该属性，则a标签与普通文本没有什么区别）

href中要添加一个跳转路径（可以是绝对路径也可以是相对路径）

target

窗口打开的方式

__self 在当前窗口打开（默认）可以省略

__blank 在新的空白页打开该标签

描点的实现

如果想要跳转到当前页面，那么href的值可以设置为#

1.利用a标签的name属性

2.利用其他标签的id属性

实现代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="GB 2312">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>锚点</title>
</head>

<body>
    <!-- 如果是a标签就设置name属性值，如果是其他标签就设置id属性值 -->
    <h2>内容1</h2>
    <p>定义预格式化文本，保留文本中的空格和换行，文本呈现等宽字体，也就是说文本是怎么样子的显示效果就是怎么样子的</p>
    <p> 定义预格式化文本，保留文本中的空格和换行，文本呈现等宽字体，也就是说文本是怎么样子的显示效果就是怎么样子的</p>
    <p> 定义预格式化文本，保留文本中的空格和换行，文本呈现等宽字体，也就是说文本是怎么样子的显示效果就是怎么样子的</p>
    <p> 定义预格式化文本，保留文本中的空格和换行，文本呈现等宽字体，也就是说文本是怎么样子的显示效果就是怎么样子的</p>
    <p> 定义预格式化文本，保留文本中的空格和换行，文本呈现等宽字体，也就是说文本是怎么样子的显示效果就是怎么样子的</p>
    <p> 定义预格式化文本，保留文本中的空格和换行，文本呈现等宽字体，也就是说文本是怎么样子的显示效果就是怎么样子的</p>
    <p><a name="nr1" href="">回到这里</a> 定义预格式化文本，保留文本中的空格和换行，文本呈现等宽字体，也就是说文本是怎么样子的显示效果就是怎么样子的</p>
    <p> 定义预格式化文本，保留文本中的空格和换行，文本呈现等宽字体，也就是说文本是怎么样子的显示效果就是怎么样子的</p>
    <p> 定义预格式化文本，保留文本中的空格和换行，文本呈现等宽字体，也就是说文本是怎么样子的显示效果就是怎么样子的</p>
    <p> 定义预格式化文本，保留文本中的空格和换行，文本呈现等宽字体，也就是说文本是怎么样子的显示效果就是怎么样子的</p>
    <p> 定义预格式化文本，保留文本中的空格和换行，文本呈现等宽字体，也就是说文本是怎么样子的显示效果就是怎么样子的</p>
    <br><br><br><br><br><br><br><br><br><br>
    <h2>内容2</h2>
    <p> 定义预格式化文本，保留文本中的空格和换行，文本呈现等宽字体，也就是说文本是怎么样子的显示效果就是怎么样子的</p>
    <p> 定义预格式化文本，保留文本中的空格和换行，文本呈现等宽字体，也就是说文本是怎么样子的显示效果就是怎么样子的</p>
    <p> 定义预格式化文本，保留文本中的空格和换行，文本呈现等宽字体，也就是说文本是怎么样子的显示效果就是怎么样子的</p>
    <p> 定义预格式化文本，保留文本中的空格和换行，文本呈现等宽字体，也就是说文本是怎么样子的显示效果就是怎么样子的</p>
    <p id="nr2"> 111111定义预格式化文本，保留文本中的空格和换行，文本呈现等宽字体，也就是说文本是怎么样子的显示效果就是怎么样子的</p>
    <p> 定义预格式化文本，保留文本中的空格和换行，文本呈现等宽字体，也就是说文本是怎么样子的显示效果就是怎么样子的</p>
    <p> 定义预格式化文本，保留文本中的空格和换行，文本呈现等宽字体，也就是说文本是怎么样子的显示效果就是怎么样子的</p>
    <p> 定义预格式化文本，保留文本中的空格和换行，文本呈现等宽字体，也就是说文本是怎么样子的显示效果就是怎么样子的</p>
    <p> 定义预格式化文本，保留文本中的空格和换行，文本呈现等宽字体，也就是说文本是怎么样子的显示效果就是怎么样子的</p>
    <p> 定义预格式化文本，保留文本中的空格和换行，文本呈现等宽字体，也就是说文本是怎么样子的显示效果就是怎么样子的</p>
    <p> 定义预格式化文本，保留文本中的空格和换行，文本呈现等宽字体，也就是说文本是怎么样子的显示效果就是怎么样子的</p>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <!-- #的作用是一个指向 href属性执行a标签的name属性值 -->
    <a href="#nr1">回到内容1</a>
    <a href="#nr2">回到内容2</a>
</body>


</html>

图片

img标签行内标签不会自动换行

必须属性

src 被引入图片的地址

常用属性

title 当鼠标悬停在图片上时显示的文字

alt 当图片加载失败时显示的文本

width 设置图片的宽度

height 这只图片的高度（单位px）

align 规定如何根据文本来排列图像（left right center）

border 给图像设置边框，数字表示大小

表格

table 表示表格

tr 表示表格中的行（每一行可以包含一个或多个td或th）

td 表示表格中的标准单元格

th 表示表格中的表头单元格（具有标题的效果，字体加粗，居中显示）

table常用属性

border 表格的边框

width 表格的宽度像素值或百分比，如果是百分比，参考的是上一级元素的宽度，如果上一句元素未设置，则参考屏幕宽度

height 表格的高度

align 表格的对其方式（left，right，center）

tr常用属性

align 每行中文本内容的水平方向对其方式（left，right，center）

valign 每行中文本内容的垂直方向对其方式

bgcolor 设置行的背景颜色

css样式

border-collapse：collapse 合并表格边框

合并单元格

td的colspan和rowspan分别规定单元格横跨的列数和行数

横向合并 colspan

<th colspan="2">班级</th>

纵向合并 rowspan

<td rowspan="2">我们</td>

表单

所有标签都有的属性：

id属性用来标识元素的唯一性

name属性提交数据时的参数名

style属性设置元素的行内样式（具体的样式）

class属性设置元素的样式名

表单

from

表单用于向服务器传输数据，from元素是块级元素，其前后会产生折行

表单提交时，必须设置表单元素name属性值，否则无法获取数据

表单需要结合表单元素一起使用

常用属性

action 提交表单的地址

method 提交方式

GET 提交

POST 提交

target 提交数据时打开窗口的方式

_self 打开当前窗口

_blank 打开空白窗口

GET请求与POST请求的区别（post请求需要服务器的支持）

1.get请求时参数会跟在浏览器地址栏的后面，而post请求不会（post请求会将数据存放在请求体中）

2.get请求相对于post而言，不那么安全

3.get请求传递传递的数据长度是有限的，而post请求基本没有限制（长度和服务器相关）

4.get请求比post请求快（2倍左右）

5.get请求有缓存（会将数据存放在浏览器中，即本地磁盘中）而post请求无缓存

input标签（行内元素）

type 元素的类型

text 文本框

password 密码框

radio 单选框

checkbox 复选框

file 文件域

hidden 隐藏域

button 普通按钮

submit 提交按钮

reset 重置按钮

date 日期框

value 元素的值

readonly 只读状态

maxlength 最多输入长度

disabled 禁用标签

注意：

1.单选框需要通过name属性设置为一组，复选框需要通过name设置为一组

2.如果是上传文件的表单，则表单需要设置一个属性enctype=“multipart/from-data”，提交方式为post

3.没有name属性是无法提交的！！！

实现代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="http://www.baidu.com" method="get">
			文本框：<input type="text" value="xiaozhi" maxlength="10" /><br>
			单选框：<input type="radio" value="man" name="sex" />男
			<input type="radio" value="man" name="sex" />女
			<br>
			文件域：<input type="file" /><br>
			普通按钮：<input type="button" value="普通按钮" /><br>
			提交按钮：<input type="submit" value="提交按钮" /><br>
			重置按钮：<input type="reset" value="重置按钮" /><br>
			提交按钮：<input type="date" /><br>
		</form>
	</body>
</html>

textarea

定义可输入多行文本的控件

cols 文本的可见宽度

rows 文本的可见行数

lable 标签

for属性

当for属性与元素的id属性值一致时，点击label标签，会自动元素聚焦

实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		姓名：<input type="text" name="uname" /><br />
	    简介：<textarea cols="30" rows="10"></textarea>
		<br />
		<hr/>
		<label for="uname">姓名</label>:<input type="text" name="uname" id="uname" />
	</body>
</html>

下拉框

select 下拉框标签

option 下拉框的选项标签

select 常用属性

		mutiple   设置下拉框可多选

size 设置下拉框可见选项数

disabled 禁用元素

option常用属性

selected 默认选中项

disabled 禁用某个选项

value 提交给服务器的选项值

如果设置了value属性值，则提交的是value的值，如果设置了value属性值，则提交option双标签中的文本值`

实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<select name="city" disabled="disabled">
			<option>上海</option>
			<option>北京</option>
			<option>深圳</option>
		</select>
		<select name="city" multiple="multiple" size="2">
			<option>上海</option>
			<option>北京</option>
			<option>深圳</option>
			<option>上海</option>
			<option>北京</option>
			<option>深圳</option>
		</select>
		<select name="city">
			<option value="">请选择城市</option>
			<option>上海</option>
			<option selected="selected">北京</option>
			<option disabled="disabled">深圳</option>
		</select>
	</body>
</html>

学习这个道理和行为除了给你增加知识，技能，思考深度外，真正的用途在于持续学习这一行为本身为你带来的知识体系革新，潜在机会的把握能力，因学习而产生的计划性和自律性，以及，知识本身带来的抗焦虑性

少年白马

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
5
评论
HTML学习笔记

网页编程设计有序列表和无序列表<!DOCTYPE html><html lang="en"><head> <meta charset="GB 2312"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
复制链接

扫一扫