web前端学习笔记——Day1(html)

最新推荐文章于 2021-10-11 16:12:41 发布

小小鱼@✔

最新推荐文章于 2021-10-11 16:12:41 发布

阅读量467

点赞数 1

分类专栏： web前端学习笔记文章标签： web前端

本文链接：https://blog.csdn.net/qq_43338468/article/details/89932204

版权

web前端学习笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

heda标签

meta

meat标签的组成：meat标签共有两个属性，它们分别是http—equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

1、name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

<meta name='keywords' content='meta总结,html,meta,meta属性,meta跳转'>

keywords：关键字content后面跟的是关键字。通过关键字搜索找到关键字搜索找到网站。

<meta name='description' content='web前端'>

description：描述。content后面跟的是描述网站的信息。

2、http—equiv，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为centent，content中的内容其实就是各个参数的变量值。

<meta http-equiv='Refresh' content='5;URL=http://www.baidu.com'>
Refresh：刷新；5秒后刷新，跳转到www.baidu.com。可以不加URL及后面的内容，只执行刷新功能。
<meta http-equiv='content-Type' charset=UTF8>
设定编码方式utf8
<meta http-equiv='X-UA-Comoatible' content='IE=EmulateIE7' />
兼容IE浏览器（主要是6，7）

非meta标签

<title>wzq</title>标签
<link rel='icon' herf='http://www.taobao.com/favicon.ico'>小图标 
<link rel='stylesheet' herf='css.css'>引入css
<script src='hello.js'></script>引入js

body标签

一：基本标签（块级标签和内联标签）

<hn>:n的取值范围是1~6；从大到小，用来表示标题。
<p>:段落标签，包裹的内容被换行，并且也上下内容之间有一行空白。
<b>和<strong>:加粗标签。
<strike>:为文字加上一条中线。
<em>:文字变成斜体。
<sup>和<sub>:上角标 和 下角标。
<br>:换行。
<hr>:水平线。
    
<div></div>:相当于一个盒子。
<span></span>:内联标签

特殊字符：&nbsp 空格 &lt 小于 &gt大于 &quot " &copy © &reg®

块级标签特点：1、总在新行开始；2、宽度缺省是它的容器的100%，除非设定一个宽度；2、可容纳内联标签和其它元素。

内联标签特点：1、和其他元素都在一行；2、宽度就是它的文字或图片的宽度，不可改变；3、内联元素只能容纳文本或者其它内联元素。

二、图形标签：

src:要显示图片的路径
alc:图片没有加载成功时的提示
title:鼠标悬浮时的提示信息
width:图片的宽
height:图片的高（宽高两个属性只用一个会自动等比缩放）

举例：
<!DOCTYPE html>
<html>
<head>
	<title>wzq</title>
</head>
<body>
	<img src="F:\我鱼\1\-1c4f77f2262c4c10.jpg" alt="jy" title="wzq" width="200px" height="300px">
</body>
</html>

三、超链接标签（标签）**

href:href=要连接的资源路经 格式如下："http://www.baidu.cpm"
targrt:_blank:在新的窗口打开查超接。框架名称：在指定框架中打开连接内容
name:定义一个页面的书签
用于跳转 href:#id

eg文字链接：<a href="http://www.taobao.com" target="_blank">淘宝网</a>
eg图片链接：<a href="http://www.xiaohuar.com" target="_blank"><img src="F:\我鱼\1\-1c4f77f2262c4c10.jpg" alt="jy" title="wzq" width="200px" height="300px"></a>

eg：<a href="#wzq"></a>   跳转到id为wzq的位置

四、列表标签

<ul>:无序列表
<ol>：有序列表
	<li>：列表中的每一项
<dl>：定义列表
	<dt>:列表标题
	<dd>:列表项

举例：
	<ul>
		<li>111</li>
		<li>222</li>
		<li>333</li>
	</ul>
	<ol>
		<li>www</li>
		<li>zzz</li>
		<li>qqq</li>
	</ol>
	<dl>
		<dt>第一张</dt>
		<dd>diyijie</dd>
		<dd>dierjie</dd>
		<dt>第二张</dt>
		<dd>asasa</dd>

	</dl>

五、表格标签table

id 是一个属性，是唯一的

border:表格边框
cellpadding:内边距
cellspacing:外边距
width:像素  百分比。（一般通过css来设置长宽）
<tr>:table row
    <th>:table head cell
    <td>:table data cell
roespan:单元格竖跨多少行
colspan:单元格横跨多少列（即合并单元格）
<th>: table header <tbody>  (不常用)为表格进行分区

eg：
<!DOCTYPE html>
<html>
<head>
	<title>表格标签</title>
</head>
<body>
	<table border="2px solid" cellpadding="10px" cellspacing="5px">
			<tr>
				<th>111</th>
				<th>222</th>
				<th>333</th>
			</tr>
			<tr>
				<td rowspan="2">www</td>
				<td>zzz</td>
				<td>qqq</td>
			</tr>
			<tr>
				<td>www</td>
				<td>zzz</td>
				<td>qqq</td>
			</tr>
			<tr>
				<td>www</td>
				<td colspan="2">zzz</td>
				<td>qqq</td>
			</tr>
	</table>

</body>
</html>

小小鱼@✔

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端学习笔记——Day1(html)

heda标签meta meat标签的组成：meat标签共有两个属性，它们分别是http—equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。 1、name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。<meta name='keywords' conten...
复制链接

扫一扫