HTML笔记

最新推荐文章于 2024-01-18 19:00:14 发布

浩彤先生

最新推荐文章于 2024-01-18 19:00:14 发布

阅读量131

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_32705919/article/details/99128312

###网站的架构

CS：Client Server 客户端和服务端
移动客户端：Android和iOS
电脑客户端：windows和linux、Mac OS
客户端是由客户端工程师开发
服务端功能：给客户端提供数据
应用场景：京东、淘宝、唯品会
BS：Browser Server 浏览器和服务端
浏览器
服务端功能：给浏览器提供数据和页面
应用场景：页游
[外链图片转存失败(img-maS8YA8K-1565451208986)(01.png)]
将来工作 BS和CS架构都会涉及，但是只需要掌握BS架构 CS就会了

###课程介绍

###前端课程介绍

HTML ：用来勾勒出页面的结构和内容(骨架)
CSS ：用来美化页面
JavaScript：让页面呈现动态效果和动态数据的
JQuery：用来简化JavaScript代码的

###HTML
Hyper Text Markup Language：超文本标记语言

什么是超文本：不仅仅是文本，还包括文本的字体颜色，样式还包括多媒体（图片，音频，视频）
html学习内容：学习有哪些固定的标签，还有标签内部有哪些属性和标签和标签之间的嵌套关系

###通过Eclipse创建html文件

新建文件-> other->搜索html

###html结构

	<!DOCTYPE html>   //文档声明 告诉浏览器使用html的哪个版本来解析页面内容 ，此写法是告诉浏览器用最新的     
  html5的版本解析 
	<html>//所有内容都在html标签内部 除了 文档声明
		<head>//头 ：里面的内容是给浏览器看的 比如使用什么编码 
		</head>
		<body>//体 ：里面的内容是给用户看的 
		</body>
	</html>

####head里面的标签

	<meta charset="UTF-8">：告诉浏览器使用哪种字符集解析

	<title>Insert title here</title> 告诉浏览器 页面标题是什么，title还可以起到优化SEO的作用（让搜索引擎尽快搜索到此页面）
	 keywords的作用：让搜索引擎尽快的找到本页面

###Body内部的标签
####文本标签

	1. <h1></h1>.......<h6></h6> 内容标题
	- align：left/center/right  水平对齐方式
	2. <p></p>    段落标签 ，每个段落标签独占一行并且上下会留有空白区域
	3. <hr> 水平分割线
	4. <br> 换行

####列表标签

无序列表：

 	<ul type="circle"> <!-- u:unordered 无序 l:list 列表 -->
 		<li>刘备</li><!--l:list列表 i:item 项  -->
 		<li>貂蝉</li>
 		<li>孙尚香</li>
 		<li>孙悟空</li>
 	</ul>

有序列表

 	<ol>
 		<li>打开冰箱门</li> 
 		<li>把大象装进去</li>
 		<li>关上冰箱门</li>
 		<li>啦啦啦</li>
 	</ol>

常见属性： type 控制每个列表项前面的表示的样式（a A i I 1默认） start 列表数值的起始值 reversed 倒序

定义列表

 <h3>定义列表</h3>
 <dl><!-- defined list 定义一个列表 -->
 	<dt>凉菜</dt><!--defined title 定义标题 -->
 	<dd>老醋花生</dd><!--defined data 定义数据  -->
 	<dd>花毛一体</dd>
 	<dd>大拌菜</dd>
 	<dt>炒菜</dt>
 	<dd>宫保鸡丁</dd>
 	<dd>小炒肉</dd>
 	<dd>木须肉</dd>
 </dl>

列表嵌套

有序和无序列表可以任意嵌套多层

###分区标签（元素） div和span

对页面进行分区有两大好处：

可以多个页面复用同一个区域的内容
可以对整个区域的内容进行统一管理

分区元素本身没有显示效果，起到容器的作用
div：块级分区独占一行
span：行内分区和多个行内分区元素共占一行

通常一个页面会分为三大区域

  <body>
  	<div>头部区域</div>
  	<div>正文区域</div>
  	<div>尾/脚部区域</div>
  </body>

在html5中提出了几个分区元素效果和div一样，但是代码可读性增强了

  <body>
  	<header>头部区域</header>
  	<article>正文区域</article>
  	<footer>脚部区域</footer>
  </body>

####元素的分类

块级元素：独占一行
包括： h1-h6, p,div,hr
行内元素：和多个行内元素共占一行

包括：span, <i></i>和 <em></em>（斜体）

```
和(粗体) 
```
```
下划线 
```
```
<s></s>和 <del></del>删除线
```

####行内元素空格折叠现象

行内元素中空格如果有多个只能识别一个空格
####需要转义的常见特殊字符实体引用
```
空格： &nbsp;
```
```
< : &lt;
```
```
> : &gt;
```
```
换行： 
```

###图片元素

```
<img>属于单标签
```
常见属性：

alt：当图片不能正常显示的时候显示此文本
src：写图片的路径，路径分为两种：

绝对路径：以http开头的路径，此路径可以指向本网站也可以指向其它网站(盗链，盗链图片如果原网站图片发生改变则不能正常显示)
相对路径：相对于当前页面html文件 1. 图片和页面文件在同一个文件夹下，直接写文件名，2. 图片在页面文件的上一层文件夹 …/文件名 3. 在页面文件的下一层文件夹文件夹名/文件夹名/文件名
路径总结：如果是站内资源使用相对路径，站外资源使用绝对路径
图床：专门存放图片的网站，使用图床可以节省本站空间

title:图片标题当鼠标悬停在图片上面的时候显示
width：设置图片的宽度，两种方式：像素和百分比，如果只设置宽度高度会保证宽高比的情况下自动跟着宽度改变
height: 设置图片的高度，两种方式：像素和百分比。

img支持的图片格式： jpg png gif

####Map 图像地图

什么是图像地图：可以将图片的某个区域作为可点击的链接

使用方式：

  <!-- usemap:使用地图 #代表当前页面 -->
  <img alt="" src="../imgs/b.jpg" usemap="#mymap">
  <!-- 为了保证兼容性问题 把name和id都写上  -->
  <map name="mymap" id="mymap">
  	<!-- area区域  shape形状 rect矩形 coords坐标-->
  	<area shape="rect" coords="0,0,200,200" 
  			href="../imgs/2.gif">
  	<area shape="circle" coords="663,473,90"
  		 href="../imgs/d.jpg">
  </map>

map中的id和name作用是让图片能够找得到此地图
area常见属性： shape表示形状常用有circle和rect
href：值为一个路径，可以写相对路径和绝对路径，路径可以指向页面，也可以指向文件（浏览器可以打开的文件直接浏览，不能打开的文件则下载）

###超链接 a标签

如果a标签没有添加href属性就相当于一个文本不是超链接
href属性和图像地图中的href作用一样
target="_blank" 开启一个新的页面

锚点用法： 需要先创建锚点:<a id="a" name="a"></a>, 然后通过a标签跳转到锚点的位置：<a

href="#a">跳转到锚点
img标签放在a标签内部则图片就可以被点击了
###练习：1号美女 2号美女 3号美女 4号帅哥

###表格 table

接触标签有 table tr td
table的属性：align水平对齐 width宽度 border边框 cellspacing边框和单元格的距离 cellpadding内容和单元格的距离
td的属性：colspan跨列 rowspan跨行 align水平对齐
caption标签

分组标签：<thead> <tbody> <tfoot>  没有任何显示效果，提高代码可读性

###表单

表单的作用是收集用户的数据提交到服务端
表单中的控件包括：文本框、密码框、按钮、下拉列表、单选、复选、时间选择、文件选择、文本域
####文本框
```
 <input type="text" placeholder="占位文本" maxlength="最大字符长度" readonly="只读" >
```

####密码框

    	<input type="password" maxlength>

####单选

    	<input type="radio" checked默认选中>

####多选、复选框

	<input type="checkbox" id="aaa">  <label for="aaa">xxx</label>

####时间

	<input type="date" >

####文件

	<input type="file" >

####下拉选

	<select name>
			<option value selected></option>
	<select>

####文本域

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

####隐藏域

	<input type="hidden">

####按钮

	<input type="submit/reset/button" value="按钮标题">