Web前端开发HTML_虚拟超链接-CSDN博客

本文链接：https://blog.csdn.net/qq_43428547/article/details/98341787

w3c教程:www.w3school.com.cn/
web技术:MDN(developer.mozilla.org/zh-CN/docs/Learn)

1.网页元素:
1.站标Logo
2.导航栏
3.超链接
4.广告横幅
5.表单元素

2.网站和网页：
网站:文件夹
网页:文件

3.浏览器作用:
解析网页源代码,渲染网页

4.设计技术:
结构:HTML(描述页面结构)
样式:CSS(美化页面)
行为:JavaScript(页面交互)

5.HTML基础:
HTML编辑器:Sublime Text3 安装 emmet插件
HTML语言定义:超文本标记语言
组成:标签(<></>)，通常成对出现,<>内为标签的名字，尖括号内的为内容,所有组成元素,单独出现标签以斜杠结束</>.标签内还可以带有属性
标签嵌套(HTML DOM(文档对象模型)树):

<html>
	<head>
	</head>
	<body>
	</body>
</html>

<!	-- 这首一段注释 -->//注释书写
<title> 这是一个标题 </title>//<><>为标签,title为标签的名字,所有组成为元素
<img src="logo.jpg alt="站标" />//src和alt为标签的属性,一个标签可以有多个属性，且不分先后顺序

6.HTML文件结构:
文件后缀.htm 或者 .html

<!DOCTYPE html>// <!-- 文档类型:符合HTML5标准-->
<html lang="en">//<!--lang属性:搜索引擎,en英文,zh中文-->
	<head>
		<meta charset="UTF-8"/>//<!-- meta：元数据,提供给浏览器和搜索引擎的关于网页的描述性数据,charset属性:字符集编码方式,-->
		<title> </title>//<!--头部，网页最上方-->
	</head>
	<body>
	</body>
</html>

7.HTML标签:
标题:h1-h6（一个页面最好只有一个h1）,1-6级标题大小是逐渐减小，可以用css规定标题大小
段内换行:br，单独出现的标签
段内分组:span，组合行内标签，以便通过CSS格式来格式化
段落:p,每个段落自动换行，段落内文字忽略连续空格,也不会显示空行，添加空格字符用&nbsp；，
预留格式:pre,pre标签内容保留原格式
水平线:hr,单独出现的标签
注释标签：-- 这是一个注释 --，注释可以跨行

8.HTML标签(a):
超链接a标签:文本或图片超链接，不会换行,通常放在p标签里（链接要写完整）

<a href="网址" > 文字或者图片 </a>

1.链接到本站点其他网页

<a href="news.html" > 新闻 </a>

2.链接到其他站点(例如百度)

<a href="http://www.baidu.com"> 百度 </a>

3.虚拟超链接:
当你不知道该链接到底指向那个链接时,用虚拟超链接代替，单击之后不出显示其他东西

<a href="#"> 板块2 </a>

9.HTML标签（img标签):
src属性为图片路径,alt属性为当图片无法打开时,图片替换的文本,不换行

相对路径:
情况一:“logo.gif”
情况二:“images/logo.gif”
情况三:"…/logo.gif"
情况四:"…/images/logo.gif"

jpg:有损压缩(),色彩丰富图片
gif:简单动画,背景透明
png:无损压缩,透明,交错(逐步清晰),动画

10.HTML标签(div,table,ul,ol):
1.区域标签:div,如页面的一个板块，结合css进行排版

<div align="center">
	<h1>web 前端开发</h1>
</div>

2.列表标签:
1.无序列表:ul li导航栏,ul为无序列表,li为列表项
2.有序列表:ol li

3.表格:table：
每一行:tr标签
每一行内的单元格:td标签
当为表头时不用td标签,用th标签加粗显示

11.HTML标签(form,input,select,textarea):
表单:form，是一个区域,采集用户信息，有个action属性表示交由哪个页面处理
表单元素:文本框,按钮，单选/复选框，下拉列表，文本区域

<form>
	<input type="">//<!-- type可以取text,password,submit,reset,radio,checkbox -->
	<select>
		<option>//<!-- 下拉列表>

按钮:
1.提交按钮(submit)
2.重置按钮(reset)

<form>
	账户：<input type="text" name="userName" />
	<br/>
	密码:<input type="text" name="password" />
	<br/>
	<input type="submit" value="提交" name="submitButton"/>//<!--value属性表示按钮的名字-->
	<input type="reset" value="重置" name="resetButton"/>//<!-- name属性可以让后端通过name属性获得输入-->
</form>

单选/复选框:
例如:
1.性别:男女
2.爱好:音乐体育阅读

<form>
	性别:
	<input type="radio" value="boy" name="gender" checked="checked"/>
	<input type="radio" value="girl" name="gender">
	<br/>
	爱好:
	<input type="checkbox" value="1" name="music" checked="checked"/>
	<input type="checkbox" value="2" name="sports" />
	<input type="checkbox" value="3" name="read"/>
	
</form>

//对于单选框,在单选框中属性name要相同,要想哪个被选中可以设置其属性checked为checked
//对于复选康,name可以不同,value为提交给后端的值,也要不同,要想那个选项被选中也可设置其属性checke

下拉列表框:

<select>
	<option selected="selected"></option>
</select>

文本域:

<form>
	<textarea rows="行数" cols="列数"> </textarea>
</form>

web语义化:

<em<</em>//<!-- 强调:斜体-->
<strong></strong>//<!--强调:粗体-->

<!--自定义列表dl,列表项dt,描述dd-->
<dl>
	<dt></dt>
	<dd></dd>
</dl>