html初学笔记

最新推荐文章于 2024-09-18 09:47:26 发布

仲夏与贰

最新推荐文章于 2024-09-18 09:47:26 发布

阅读量89

点赞数

分类专栏：初学笔记文章标签： html5 html

本文链接：https://blog.csdn.net/lliuxia/article/details/110141096

版权

初学笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Html中的有效空格：&nbsp；

圈中c：&copy

字体风格标签内用font-famliy：‘’ ；大小用font-size：；

或style里的width：；

Fn+f12或直接f12：可以查看生成的网页中的元素性质

行列元素，行容不下才会换行，标签包裹元素内容
需记标签：<i></i> 斜体
<b></b> 加粗
<del></del> 删除线
<span></span> 无效果

块列元素：长度占满整个上一级大标签，有居中之类的空间

<p></p> 长度会打穿

<div></div> ：diversion的缩写

Ol（order list）标签（有序列表）里面使用li（list）标签，前面会出现1.

2. 3. start可改变开始计数数字（都用顺序改变）

type也可改变类型（罗马数字）

Ul标签（类似ol）前面是点没有数字可以改变样式

Hn标签（标题标签）n取1到6（字体大小不同）

块级元素

标签里加边框时颜色粗细类型

字体在C盘windows文件的fonts文件夹里

字体名字有空格的要用‘’引上

表格（table）行（tr）

表头里面用th其他的数据用td

加线什么的用style在table外

要调节宽度

竖着的只用调表头

横着的调每一行

方向左右

Text-align左右：；

Vertical-align上下：；

合并列colspan=“列数”并删掉下一列

合并行rowspan=“行数”并删掉下一行

合并前应先做出未合并的表格

表格边框的孔隙和折叠都在border-属性里

输入行，上传头像，文本框，表格框，分网页（过时），居中，竖直靠下

Form表单：

效果：登录账号页面，文件上传，单选，下拉选项

里面：input插入输入行，

Placaholder行中字体，

Type输入行类型，

Submit，buttom按钮，

Value是按钮内字体

File上传文件

Select下拉列表搭配option使用

单选<input type=“radio”name=“sex” id=male/><label for=“male”>男</label>

Name标记出于同一类

For是针对id的

Textarea文本框，cols（列）调左右宽度

Row（行）调上下宽度，固定style=“resize：none；”

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			i{
				
				color: palegoldenrod;
			}
			b{
				
				color: palegoldenrod;
			}
			div,h1,p{
				
				color: palegoldenrod;
				text-align: center;
			}
			tr,th,td{
				border: 1px black solid;
			}
		</style>
	</head>
	<body>
		<!---->
		<a href="https://www.baidu.com/index.php?tn=monline_3_dg" style="text-decoration: none;">百度</a>//网址最好是全复制后粘粘不然有可能链接不上
		
		<img src=""/>
		
		
		
		<i>范金略 范金略 略略略略略 略略略略略 略略略略</i>
		<b>luelueluelueluelue</b>
		<div>hahahahahahaha</div>
		<h1 style="font-size: 100px;">da da da zaida </h1>
		<h2>略略</h2>//改其中一个不会连带着其它 hn标签
		<p>哈</p>
		
		<ol type="a" start="99999999999999999999999">
			<li>哈哈</li>
			
		</ol>
		
		<ul type="square"></ul>
		<table style="border: 1px deepskyblue solid;border-collapse: collapse;border-spacing: 3px;">
			<tr><th>Header</th><th>略略</th></tr>
			<tr><td>Data</td><td>哈哈</td></tr>
		</table>
		<textarea style="" cols="" rows="" style="resize: none;"></textarea>
		
		<form>//input内type的radio是单选，checkbox是多选，用name标记属性来说明是一类
			<input name="sex" type="radio" id="male"/><label for="male">男</label>//label 的for针对的是id
			<input name="sex" type="radio" id="female"/><label for="female">女</label>
			<input type="checkbox" name="haha" id="1"/><label for="1">略略略</label>
			<input type="checkbox" name="haha" id="2"/><label for="2">略略略</label>
			<input type="checkbox" name="haha" id="3"/><label for="3">略略略</label>
		</form>
	</body>
</html>