HTML

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

Erich_Wu

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

阅读量298

点赞数

文章标签： html

本文链接：https://blog.csdn.net/Erich_Wu/article/details/106986626

版权

HTML

1.系统架构体系

B（浏览器）/S（服务器）架构

C（客户端）/S（服务器）架构

B/S系统（Web系统）的特点：

规范
使用方便
本身实现成本低

页面渲染

几大渲染引擎（谷歌、火狐、IE、Opera、Safari）

Web前端

HTML(黑白)、CSS(彩色）、JavaScript (动画效果)

2.网页内容：文字、图片、视频、超链接等等

3.什么是HTML？

超文本标记语言

超文本：文字+图片+音视+链接…

标记：浏览器根据已定义好的某一对标签来显示对应内容

语言：一门计算机语言

4.Web前端最重要的三项技术

HTML核心规范

CSS（层叠样式表）：设置元素的属性样式

JavaScript：让元素具有动态效果

H5(HTML5)：2014.10.28，W3C推荐标准

新特性：

引入原生多媒体支持

映入可编程内容

引入了语义Web

5.W3C标准包括:

结构化标准语言（XHTML 、XML）

表现标准语言（CSS）

行为标准（DOM、ECMAScript ）

6.文件扩展名：Win使用文件扩展名来区别文件的类型

7.Web开发工具

IDE工具：快捷的开发效率、语法提示、语法高亮

8.（取消）注释：Ctrl+/

9.标签

标签放在<>里面

标签一般是成对出现的，有开始标签和结束标签，也被称为开放标签和闭合标签

   单标签页/自关闭标签

10.代码

    <!DOCTYPE html>
				<html>
					<head>
						<meta charset=”UTF-8”>                     定义字符编码
						<meta name="keywords" content="电子类"/>    搜索引擎
						<title>窗口标题</title>
					</head>

					<body>                 页面上显示的文本、超链接、图片、视频
						<!-- font标签 -->
						<font size=”5px”>文本</font>     字体大小
						<font color=”red”>文本</font>    字体颜色
						<font face=”楷体”>文本</font>    字体样式

						<!-- h系列标签  h1-h6 从字体的大小粗细依次递减，h1最大 h6最小 -->
						<h1>你好</h1> 
						<h2>你好</h2>
						<h3>你好</h3>
						<h4>你好</h4>
						<h5>你好</h5>
						<h6>你好</h6>

						<!-- p标签，段落标签 -->           一个p标签会独占一行
						Hello world<br/>
						你好世界
	    
						Hello world
						<hr>
						你好世界
		
						<p>全国政协委员、百度董事长李彦宏今年带来的四项提案中三项都与人工智能有关，“我们要抓住国家推进制造业
						智能化升级和新兴产业发展的机遇，加快5G、人工智能、数据中心等新型基础设施建设，推动智能经济加速到来，
						让百姓过上更加幸福的生活。”李彦宏表示。</p>
						Hello world

						<b></b>     粗体                <strong></strong>  加粗
						<i></i> <em></em>     斜体
						<u></u>     下划线
					</body>
				</html>

11.img

src属性，放置图片地址，一般用作非文本引入方式

相对路径：一般以http:// 或者https:// 或者系统盘符（c:）开头的地址

绝对路径：相对于当前目录而言其他文件所在的地址，中上一级目录（…/） ,下一级目录(/)

src可以存放本地图片地址，建议使用相对路径，也可以放置在线图片，可设置宽高

title：鼠标悬停的文字

alt：图片失效提示文字

width

height

12.超链接

<a href="path" target="目标窗口位置">链接文本或图像</a>

href跳转的地址，可以是网页、图片，一般用作文本引入方式

target=“目标窗口位置”，常用值：_self、_blank

13.特殊符号

        &lt        <
		&gt        >
		&reg       注册商标
		&amp       &
		&nbsp      空格
		&copy      版权符号
		&trade     商标

14.body标签

bgcolor 背景颜色

background 背景图片

15.表格

和tr、td标签配合使用

	thead：表头    <th>默认加粗、加黑、居中显示</th>

tbody：表体

tfoot：表尾

属性

bgcolor：背景颜色

border :表格边框

width : 表格宽度

height：表格高度

align ：对齐方式

cellspacing: 单元格之间的距离

cellspadding : 单元格边框和内容之间的距离

colspan：跨列

rowspan：跨行

为什么使用表格

简单通用

结构稳定

16. 表单

 <form action="" method="">

action：内容提交到哪里

method： get：获取信息的方式，打开一个页面

post：提交数据信息的方式，登录、注册、上传

<input type="文本框" name="文本框名称" id="" value="文本框初始值" placeholder=” 提示信息”/>

type：

text：文本内容

password（密码框）：一般用户密码和确认密码输入时使用，输入会用遮挡符遮挡

submit：提交

reset：重置

radio （单选按钮）：选择单选按钮时name2值设置为相同，则为互斥；checked=“checked”为默认选择

image src=””：图片；配合JS

button：普通按钮；配合JS

  email：<input type="submit" value="提交"> 过滤错误的邮箱形式

size：字体大小

maxlength：文本框可输入最多字符

		列表框<select name="列表名称" size="显示行数">
			  <option value="选项的值" >…</option >，selected="selected"为默认选择
		
		有序列表 <ol>
				<li>前言</li>
         		<li>正文</li>
                <li>结尾</li>
				</ol>

 		无需列表<ol>
        	    <li>前言</li>
				<li>正文</li>
				<li>结尾</li>
				</ol>