web前端技术

最新推荐文章于 2023-12-25 17:04:00 发布

朴朴朴！

最新推荐文章于 2023-12-25 17:04:00 发布

阅读量371

点赞数 2

文章标签： web web前端技术

本文链接：https://blog.csdn.net/weixin_42883475/article/details/83018617

版权

这里介绍web的一些基本知识。

我会每周不定期更新，敬请期待吧。

前言

案例测试:
marquee双标记
<marquee></marquee>

常用属性：
behavior="scroll "单方向循环滚动 "alternate"来回循环滚动 “slide” 单次滚动 width="宽度" height=”高度” direction=”方向” (left right up down) loop=“执行次数” infinite(无限的) loop=”1”

标记的书写格式：

单标记和双标记，必须有结尾
<p>content</p>
<dr />
格式：标记属性=“值” 属性=“值”…>
属性=“值” 以“键/值对”形式出现
全局书写格式:

<html>
	<head>
		<meta  />
		<title> 标题</title>
	</head>   <!--头标记-->
	<body>
			
	</body>
</html>

meta用法：

meta用法：
`<meta name=“descript" content="xxxxxxxxxxxxxxxxx">` `<meta name="keywords" content="xxxx,xxxx,xxx,xxxxx,xxxx">` `<link href="style/style.css" rel="stylesheet" type="text/css">` `<script language="javascript" src="script/xxxxx.js"></script>` `<title>xxxxxxxxxxxxx</title>` `<meta http-equiv="content-type" content="text/html; charset=gb2312“>` `<meta http-equiv="pragma" content="no-cache“>` `<meta http-equiv="refresh" content="5;url=http://www.baidu.com">`

<meta name=“descript" content="xxxxxxxxxxxxxxxxx">
<meta name="keywords" content="xxxx,xxxx,xxx,xxxxx,xxxx">
<link href="style/style.css" rel="stylesheet" type="text/css">
<script language="javascript" src="script/xxxxx.js"></script>
<title>xxxxxxxxxxxxx</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312“>
<meta http-equiv="pragma" content="no-cache“>
<meta http-equiv="refresh" content="5;url=http://www.baidu.com">

第一章:基本标记

1.body标记

标记	意译
text=“skyblue”	文字颜色
background=”路径”（相对路径、绝对路径、网络路径）	背景图
bgcolor=”red”	背景色

配色	red	green	blue	结果
#	ff	00	00	red
#	00	ff	00	green
#	00	00	ff	blue
#	ff	ff	ff	white
#	00	00	00	black

html无法设置更多属性比如背景图是否平铺，那么求助样式表：
<body bgcolor="skyblue" style="background-image: url(images/img_title2.jpg); background-repeat: no-repeat;" >

topmargin	bottommargin	leftmargin	rightmargin

固定背景图：bgproperties="fixed"

代码	意译
`link="black"`	访问前超链接颜色
`vlink="black"`	访问过的超链接颜色
`alink="black"`	访问时的超链接颜色

2.js简单应用

<body bgcolor="skyblue" topmargin="0" leftmargin="0"  bgproperties="fixed"  >
   	<h1>hello world!</h1>
   	<p><a href="#">this is a content!</a></p>
   	username:<input type="text" id="username" name="username" />
   	<input type="button" value="确认" onclick="sayhello()" />
   	
   <script type="text/javascript">
   	function sayhello(){
   		var username = document.getElementById("username").value;
   		if(username == "朴朴"){
   			alert(username+"真伟大！");
   		}
   		else{
   			alert("我不跟怪叔叔玩！"+username+"你走吧！");
   		}
   		
   	}
   </script>	
   </body>

`<img />`图片单标记

src=”路径”
width=”宽” 像素百分比
height=”高”
border=”边框”
align=”left” center right
valign=”top” middle bottom
alt=”不加载图片时的警告信息”
title=”提示信息” 可以被爬虫获取 seo搜索引擎优化、

3.排版标记

（1）`<p></p>`段落标记

（2）`<div></div>`区块标记—布局

（3）`<span></span>`行级标记-----布局

示例：

<div>
			<!--title-->
			<span>this is a title</span>
			<!--content-->
			<div>this is a content</div>
		</div>
		<div>
			<!--title-->
			<h1>this is a title</h1>
			<!--content-->
			<p>this is a content</p>
</div>

（4）`<pre></pre>`格式预处理标记

HTML实体元素

符号	代码
<	`<`
>	`>`
空格	` `
©	`©`

（5）`<br />`回车

（6）`<hr />`水平线

width=”宽度”
size=”厚”
align=”left” center right
color=”水平线颜色”
示例：
<hr width="500" size="5" align="left" style="border:2px dashed #5151a2" />

4.文字标记

（1）`<font></font>`双标记

color=”文字颜色”
size=”字号” 1~7 -2~+4
face=”字体”

（2）文字格式化标记

		title<b>title</b>加粗<br />
		title<big>title</big>增大<br />
		title<i>title</i>斜体<br />
		title<em>title</em>强调-斜体<br />
		title<small>title</small>略小<br />
		title<strong>title</strong>略壮<br />
		title<sub>title</sub>下标<br />
		title<sup>title</sup>上标<br />
		title<ins>title</ins>下划线<br />
		title<del>title</del>删除线<br />

（3）`<h1>~<h6>`标题标记

		<h1 align="center">this is a content</h1>
		<h2>this is a content</h2>
		<h3>this is a content</h3>
		<h4>this is a content</h4>
		<h5>this is a content</h5>
		<h6>this is a content</h6>

（4）`<center></center>`

5.超链接`<a></a>`

（1）页面之间跳转

属性：href=”路径” href=”url”

（2）页面内部定位—锚标记

<a href=”#file_name”>a_link</a>
<a name=”file_name”>锚位置</a>

（3）target属性:浏览器页面打开方式

blank 和 _blank(新页面) 的区别
target=”blank”

（4）mailto:使用超链接实现邮件发送

<a href=”mailto:”>e-mail_link</a>
格式：
href=mailto:邮箱地址?相关参数(cc抄送&subject主题&body内容)

href=”mailto:fanfan@163.com?
              cc=tom@163.com;jack@163.com&
              subject=My First Email&
              body=hello world!”

（5）资源下载

<a href=”路径” download=”下载后保存的文件名”></a>

6.列表 list

有序列表
无序列表
自定义列表

（1）有序列表

<ol>
   <li>list1</li>
   <li>list2</li>
</ol>

属性
`type="1" "a" "A" "i"`
`start="10"` 起始位置从序号10开始

（2）无序列表

<ul>
   <li>list1</li>
   <li>list2</li>
</ul>

属性
type="disc"黑点 "circle"空心圆 "square"方块

列表关于布局的应用—样式表

<style type="text/css">
			/*将id=navigator的list变为导航栏*/
			#head_list ol{
				list-style: none;
			}
			#head_list ol li{
				width: 200px;
				float:left;
			}
			#head_list hr{
				clear: left;
			}
</style>
body中html的标记
		<div id="head_list">
			<h1>有序列表</h1>
			<ol id="navigator">
				<li>list_1</li>
				<li>list_2</li>
				<li>list_3</li>
				<li>list_4</li>
				<li>list_5</li>
			</ol>	
			<hr />
		</div>

第二章:表格与布局

<table >
   <tr><td></td></tr>
</table

1.table

（1）table基本属性

border=”边框宽度”
bordercolor=”边框颜色”
bgcolor=”背景色”
background=“背景图路径”
width=”宽度”     像素   %
height=”高度”  一般不设置高度，内容自适应
align=”center”   left   right
(放在table标记里，表格针对页面居中----布局
放在tr   td  标记里，表格中内容居中---排版)
valign=”top”  middle    bottom------对tr td中生效
cellpadding=”表内距”  表格线和内部文字的间距
cellspacing=“表格线间距离”

（2）标题标记——排版

意译	代码
表外标题标记	`<caption></caption>`
表内标题行标记	`<th></th>`
合并列	`colspan=" "`
合并行	`rowspan=" "`

（3）表格布局标记

<talbe>
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
</table

map图片映射连接
例：

<img src="路径" usemap="#map_name"/>
<map  name="map_name">
<area shape="rect" coords="180,50,20"  href="html/new_file_1.html" target="_blank" title="六度空间" />
</map>
shape="circle"  圆形    coords="x,y,r"
     ="rect"    矩形    coords="x1,y1,x2,y2"
     ="poligon" 多边形  coords=”x1,y1,x2,y2,x3,y3,x4,y4…..”