——html

HTML

一、web基础知识

HTML5:HTML4.01升级版,大前端技术,泛指前端的所有技术
HTML4.01在99年12发布XHTML1.0在2000年1月发布,语法更严谨

1、web与Internet

web与Internet
Internet: 全球性计算机互联网络
俗称:互联网,因特网,交换网,交际网
www服务:world wide web(万维网),访问网站的服务
BBS: 电子公告版,俗称论坛
Email: 电子邮件
telnet: 远程登录
FTP: 文件的上传下载

2、internet上的应用程序

C/S client 客户端/ server 服务器
B/S Browser 浏览器 / server 服务器
C/S和B/S的区别C/S需要升级
B/S不需要升级我们工作主要是B/S

3、web运行原理

——html_第1张图片

web:运行在internet上一种B/S结构的应用程序,俗称网站Internet:为web提供网络环境web的工作原理:基于浏览器和服务器继续通信协议来实现数据的传输和展示
通信协议:规范了数据和打包和传送的
服务器:1.功能 存储数据,接收用户的请求并给出响应、 提供了程序的运行环境 具备一定的安全功能2.服务器产品 tomcat(java) Apache(php) IIS(.net)3.服务器端的技术 PHP/JAVA/.NET/python/nodejs
浏览器1.功能 代表用户发送请求 作为HTML、css和js解析器 以图形化的解码展示给用户2.浏览器产品 Chrome FireFox IE–edge Oprea Safari 3.浏览器支持的技术 H5,CSS,JS

二、HTML基础入门

1、什么是HTML

HTML:HyperText Markup Language 超文本标记语言
a 普通文本
<a>a>超文本标记
标记:超文本的组成形式 <关键字>
具有自己的功能
语言:有语法结构

2、HTML的特点

  1. 以.html或.htm为后缀
  2. 由浏览解析执行
  3. 用带有尖括号的"标记"来标识
  4. 可以在网页中执行js脚本

三、HTML的基础语法

  1. 标记,标签,元素,节点,对象
  2. 主要是表示特殊的功能
  3. 标记在使用的时候,必须使用<>包裹起来

1、标签的分类

  1. 双标记(封闭类型)

​ <关键字>

双标记必须成对出现,有开始就有结束  

  1. 单标记(非封闭类型)

     <关键字>或者<关键字/>
    

2、标签的嵌套

1.什么是嵌套
一对标记中出现另一个(对)标记,形成了层级。
<div>
  <p>p>
div>
2.语法
<关键字1>
  <关键字2>
    <关键字3>关键字3>
  关键字2>
关键字1>

3、属性和值

​ 允许通过属性对标记进行修饰

​ 语法:

​ 1.属性和值必须声明在开始标记中

​ <关键字 属性=“值”>

​ 2.多个属性之间用空格分开

	<关键字 属性1="值1"  属性2="值2"  ...>

​ 3.标准属性(通用属性)

​ 所有的元素都支持的属性

​ id 定义此元素在页面中的唯一标识

​ title 鼠标悬停在元素上时,显示的文本

​ style css中,定义行内样式

​ class css 中,引用类选择器

4、注释

​ 语法:

​ 注意:注释不能嵌套注释,注释也不能出现在标记中

四、HTML的文档结构

1、文档类型的声明

告诉浏览器,我这篇html使用h5的规则解析

2、网页的结构


<html>
	<head>head>
	<body>body>
html>
<html>html>表示网页的开头和结束
在html中包含两个标签
<head>head> 网页的头部,定义全局的信息
<body>body> 网页的主题,展示的内容

3、head元素是其他头元素的容器

<title>title>  网页的标题
<meta/> 元数据,定义网页的全局信息
<meta charset="utf-8">
chrome 62以上的版本,自动识别中文
<meta name="Keywords" content="关键词的内容"> 
<meta name="description" content="描述的内容">
<style><style>定义网页的内部样式
<script>script>定义或者引用js文件
<link/> 引用外部样式文件

4、body元素

  1. 定义网页的主体

  2. body的属性

  3. bgcolor 背景颜色

  4. text 字体颜色

  5. 取值:合法的颜色值---->颜色的应为单词

五、文本标记

1、标题元素

作用:在页面中以醒目的方式显示文本
语法 

一级标题 n:1~6 ...
六级标题 特点: 1.文本加粗 2.字号发生变化 3.独占一行,上下有垂直间距 属性align 设置标签内容水平方向对齐方式 取值:left/center/right

2、段落标记paragraph

语法:

作用:突出的表示一段文字 特点:独立成行,上下有垂直的间距 属性:align

3、换行标记


或者

4、水平线

<hr>或者<hr/>
width="50%" 表示水平线的宽度,取值为%或者px为单位的数字
size="5px" 表示水平线的尺寸(粗细),取值为%或者px为单位的数字
align="left" 对齐方式
color="red" 设置水平线的颜色

5、预格式化标签


标签内部的文本,保留其格式,在页面上显示
空格折叠现象,一个或多个空格,会被浏览器渲染成一个空格显示

6、特殊字符(实体)

空格    ;
<     <   
>     > 
©    ©;   
®    ®
¥    ¥
x     ×

7、文本样式

粗体   <b>b>   <strong>strong>
斜体   <i>i>     <em>em>
下划线 <u>u>
删除线 <s>s>    <del> del> 语意
上标  <sup>sup>
下标  <sub>sub>

8、区块元素

1.块分区,用于页面中布局
	
独立成行 2.行分区,处理同一行文本的不同样式 可以与其它的span和文字共用一行

9、行级元素和块级元素(元素的显示形式)

1.块级元素
在网页中,单独成行,就是块级元素
从上往下排列
常见块级元素:
    h1~h6
    p
    div
2.行内元素(行级元素)
在页面中,与其他行内元素/行内块共用一行
从左往右排列
页面中常见行内元素:
	i em b strong u sup sub span
3.行内块元素
显示的方式与行内元素相同,但是具备块级元素的特征
4.table
表格的宽高是由表格的内容决定的
内容多,就宽一些,高一些,
表格中所的数据都预读到内存,一次性画到页面上

六、图像和连接

1、图像

1、使用
	或者
属性
	src="url"  url--图片资源路径
2、URL
	Uniform Resource Locator 统一资源定位符  简称:路径
3、URL路径的表现形式:
	1.绝对路径,一个写完整的路径
		通信协议+主机地址+文件目录结构+文件的具体名称
		合适使用:
             1.1使用网络资源的时候,使用绝对路径
               优点:不占据自己服务器的存储空间
               缺点:不稳定
             1.2使用本地资源,使用绝对路径(项目中100%用不到)
               从最高盘符开始查找 C/D/E/F/G
               项目中不用
 	2.相对路径(参照物是html本身)
 		2.1在同一个目录下(兄弟关系),直接引用
				
		2.2子集目录,文件在兄弟文件夹的内部,先找兄弟,再找兄弟的孩子
				
		2.3父级目录,文件是父级的兄弟,先找父亲(../),再找父亲的兄弟
				
    	图片与html文件在同一个目录下,src直接引用图片名称
      	src="3.jpg"

2、链接

1.语法
<a href="http://www.tmooc.cn/">Tmooca>
属性:
    href:链接的路径
    target:指定打开链接的方式
    取值:_self默认值,在当前页面标签页中打开新链接
    _blank 在新的标签页打开链接
2.其他的表现形式

下载

新建邮件

执行js

返回顶部	
3.锚点
锚点就是网页中的一个记号
3.1定义锚点										
(1)使用a标签name属性定义锚点					
					  
3.2链接到锚点										
(1)使用a标签链接锚点,#锚点名称			
	回到锚点	  回到锚点

七、表格

1、表格语法

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

2、表格属性

table标签的属性:
				border:设置边框
				width:设置表格的宽
				height:设置表格的高
				内容小于宽高的,按宽高尺寸
				内容大于宽高,按内容改变尺寸
				align:设置表格的对齐方式 (table自己的水平)
					取值:left/center/right
				bgcolor:背景颜色
				cellpadding:设置单元格内边距(边框到内容的距离)
				cellspacing:设置单元格外边距(边框与边框之间的距离)

3、tr属性

align	设置当前行的内容水平对齐方式(设置表格内容的对齐方式)
valign	设置当前行内容的垂直对齐方式
取值:top/middle/bottom
bgcolor	当前行的背景颜色

4、td属性

width		宽度
height		高度
align		水平对齐方式
valign		垂直对齐方式
bgcolor		背景颜色
colspan		列合并
rowspan		行合并

5、不规则的表格运用

1.跨列
colspan=?
从指定的单元格位置开始,横向向右合并两个单元格(包含自己)
被合并掉的单元格,要删除
2.跨行
rowspan=?
从指定的单元格位置处开始,纵向向下合并?个单元格(包括自己)
被合并掉的单元格,要删除
3.table中的可选标记
1.表格的标题
	
如果设置标题,必须将放在之后
2.行/列的标题
	 代替
加粗,居中

6.表格的复杂应用

1.行分组
    可以将连续几个行,划分到一个组中,进行统一管理
    表头行
表格最上面一行的标题放在thead中 表主体允许将若干行放在tbody中进行统一管理 表尾表格中最后一行放在tfoot中 2.表格的嵌套 一张表格中,所有的嵌套的表格,只能放在td中

八、列表

​ 默认按照从上到下的顺序来显示数据,并且可以在数据前添加标识
​ 使用列表布局(去掉标识,从上到下,从左到右排列)

1、列表的组成

1.有序列表
    order list 2.无序列表
      unorder list 列表项
    • list item

      2、列表属性

      1.有序列表的属性 ol
          type 设置标识符的类型
          取值:1默认值,数字
          a  A  字母为标识
          i   I 罗马数字
          start 指定起始编号
          取值:无单位数字
      2.无序列表的属性 ul
          type:设置标识
          取值:disc 默认值	实心圆
          square		方块
          circle		空心圆
          none		无	
      3.列表的嵌套
      	所有的嵌套必须只能写在li中
      

      3、列表作用

      ​ 做名词解释用常用于图文混排

      需要被解释说明的名词
      对名词的解释内容

      九、结构标记—

      1、结构标签的作用【注:h5新增】

      ​ 用于代替了div,用于描述整个网页的结构,提升标记的语义

      2、常用的结构标记

      定义网页或者某个区域的头部内容 定义网页的导航链接部分
      定义网页的主体 定义网页的侧边栏
      定义网页底部内容,多用于版权,解释说明,备案号
      定义与文字相关的内容 论坛,帖子,微博条目,用户评论

      十、表单

      1、表单的作用

      1. 提供可视化的输入控件
      2. 收集用户填写的信息并提交给服务器

      2、表单的组成部分

      1. 前端部分
        ​ 提供表单的控件,与用户做交互的可视化控件
      2. 后端部分
        ​ 对提交的数据进行处理(接口)

      3、表单属性

      <form>form>
      属性:
      	1.action
              定义表单被提交时发送的动作
              通常是定义服务器处理数据的地址,接口(url)
              默认,提交给本页地址
      	2.method
              指定表单数据提交的方式(方法)
              1.get(默认值)
              明文提交,提交时内容会显示在浏览器地址栏上。
              提交的数据有大小限制,2kb
              向服务器要数据的时候使用get
              2.post
              提交数据无大小限制
              隐式提交,提交的数据不会显示在地址栏中
              把数据传递给服务器的时候,使用post
              3.delete
      
              4.put——往服务器放一些东西
      
              5.point
      	3.enctype 编码方式
              设置表单允许将什么样得数据提交给服务器
              1.提交普通字符,不能有特殊符号
              enctype="text/plain"
              2.允许将任意字符提交给服务器
              enctype="application/x-www-form-urlencoded"
              3.允许将文件提交给服务器
              multipart/form-data
      

      4、表单控件

      ​ 能够与用户进行交互的可视化元素

      1、分类
      input 元素
      textarea 多行文本域
      下拉选择框
      4其他元素
      
      2、input元素
      在页面中提供各种各样的输入控件,通过type属性来设置输入控件的类型
      type	 设置输入控件的类型
      name 为控件定义名称,提供给服务端使用(必须值)
      
      value  控件的值,提交给服务端使用
      disabled  禁用控件,不能操作也不能提交,所有input的公有属性
      无值属性
      type取值:
          1.文本框和密码框
              type="text"		默认值
              type="password"	密码
              属性
              1.1maxlength 限制输入的最大字符数
              1.2readonly 只读,只能看不能写,但允许被提交	(无值属性)
              1.3placeholder 占位符,默认显示在控件上的文本,只要得到焦点,文本就消失了,此文本不能提交
          2.按钮
              type="submit"	   提交按钮
              将表单中的数据,提交给服务器
              type="reset"	   重置按钮
              让表单内容恢复到初始化状态
              type="button"	   无功能按钮,可以调用js脚本
              button 自带submit和button
          3.单元按钮和复选按钮
              单元按钮
              type="radio"
              name属性:除了定义控件名称,还起到分组的效果。
              必须有value,不然提交的值是on
              checked:设置默认选中项,无值属性
              多选按钮
              type="CheckBox"
              name属性:除了定义控件名称,还起到分组的效果
              必须有value,不然提交的值是on
              checked:设置默认选中项,无值属性
              CheckBox的name要写成数组hobby[]
      	4.隐藏域
          	type="hidden"
              想提交给服务器,但是不想展示给用户看的数据,使用隐藏域
          5.文件选择框	
              type="file"
              注意:
                  上传多个在 name里添加数组[]
                  method="post"
                  enctype="multipart/form-data"
                  multiple   无值属性,可以同时上传多个文件
                  需要name属性值为数组
      
      3、textarea文本域
      允许录入多行数据的文本框
      	
      name 控件的名称
      readonly 只读
      cols   指定文本域的列数,以英文单词为准,中文减半
      rows  指定文本域的行数
      
      4、下拉选择框
      
      注意:当option没有value属性时,提交的时候select的value为option的内容。当option有value,提交时,select的value为选选中option的value。
      select属性
      name,选项框的名称
      size  默认为1,定义显示选项的数量。
      如果值大于1的数字。下拉选表现为滚动列表
      multiple 无值属性,可以多选,但是name要用数组
      设置了multiple之后,就算size="1" 也是滚动列表
      option属性
      value
      selected 设置默认选中项
      
      5、其他元素
      1.label
      文本与表单控件的关联
      
      属性
      for:要与label中文字发生关联的form控件的id
      
      2.为控件分组
      为控件分组 分组标题
      3.浮动框架
      允许在一个网页中,引入另外一个网页
      
      属性
      src="url"
      width="100%"
      height=""			高度存在问题,需要使用js.dom来解决
      scrolling="no"		不显示滚动条
      framesborder="0"	不显示边框
      
      4.H5新表单元素

      ​ 什么是新表单元素
      ​ 在HTML5版本中新提出来表单控件

      1.电子邮件
          
          表单提交时,会验证数据是否符合email的规范(@以及@后面有内容)
      2.搜索类型
      	
      	提供了快速清除文本框的功能
      3.url类型
      	
      	提交时,验证数据是否符合url的规范,绝对路径的规范
      	验证http://....以及后面必须有内容
      4.电话号码
      	
      	在移动设备中,显示拨号键的效果
      5.数字类型
          
          只能接受数字,并且提供了箭头灵活的调整数字
          value 指定数字
          min 能接收提交的最小值
          max 能接收提交的最大值
          step 步数,每次点击箭头,变化的数量
      6.范围类型
          
          提供一个滑块组件,允许用户指定选取的范围
          属性
          value 指定初始数字
          min 范围最小值
          max 范围最大值
          step 步数
      7.颜色拾取器
      	
      提供一个颜色的拾取器
      8.日期类型
      	
      提供了一个选择日期的控件,可以选择年/月/日
      9.月份类型
      	
      	提供了一个选择月份的控件,可以选择年/月
      10.周类型
      	
      	提供了一个选择周的控件,可以选择年/周
      

      你可能感兴趣的:(html,前端)