目录

一、web概念概述

    1. C/S: Client/Server 客户端/服务器端

    2. B/S: Browser/Server 浏览器/服务器端

        （1） 静态资源：

        （2）动态资源：

二、HTML

1. 概念：是最基础的网页开发语言

2. 快速入门：

3. 标签学习：

 （1）文件标签：构成html最基本的标签    

 （2）语义化标签（html5新的语意结构元素）

 （3）分割线标签

 （4）文本标签：和文本有关的标签

   (5) 超链接标签 

   (6) 表格标签

 （7）图片标签

 （8）音乐标签：audio

 （9）视频标签：video

 （10）列表标签

 （11）表单标签

 （12）容器（盒子）标签

4. 属性

5. 元素（标签）属性                          

https://www.w3school.com.cn/          w3school在线教程学习网站 
https://www.runoob.com/                  菜鸟教程学习网站 

一、web概念概述

* JavaWeb：
    * 使用Java语言开发基于互联网的项目

* 软件架构：

    1. C/S: Client/Server 客户端/服务器端

        * 在用户本地有一个客户端程序，在远程有一个服务器端程序
        * 如：QQ，迅雷...
        * 优点：
            （1） 用户体验好
        * 缺点：
            （2）开发、安装，部署，维护 麻烦

    2. B/S: Browser/Server 浏览器/服务器端

        * 只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序
        * 优点：
            （1）开发、安装，部署，维护 简单
        * 缺点：
            （2）如果应用过大，用户的体验可能会受到影响
            （3）对硬件要求过高

* B/S架构详解
    * 资源分类：

        （1） 静态资源：

            * 使用静态网页开发技术发布的资源。
            * 特点：
                * 所有用户访问，得到的结果是一样的。
                * 如：文本，图片，音频、视频, HTML,CSS,JavaScript
                * 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源

静态资源：
        * HTML：用于搭建基础网页，展示页面的内容
        * CSS：用于美化页面，布局页面
        * JavaScript：控制页面的元素，让页面有一些动态的效果

        （2）动态资源：

            * 使用动态网页及时发布的资源。
            * 特点：
                * 所有用户访问，得到的结果可能不一样。
                * 如：jsp/servlet,php,asp...
                * 如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器

二、HTML

1. 概念：是最基础的网页开发语言

* Hyper Text Markup Language 超文本标记语言
        * 超文本:
            * 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.
        * 标记语言:
            * 由标签构成的语言。<标签名称> 如 html，xml
            * 标记语言不是编程语言

2. 快速入门：

        （1） html文档后缀名 .html 或者 .htm
        （2）标签分为
            a. 闭合标签：有开始标签和结束标签。如
            b. 自闭和标签：开始标签和结束标签在一起。如

​
        （3） 标签可以嵌套：
            需要正确嵌套，不能你中有我，我中有你
            错误：
            正确：
​
        （4） 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来
        （5） html的标签不区分大小写，但是建议使用小写。
​
          (6) 快捷操作emment语法：
      生成标签，直接输入标签名按tab键即可
      如果想要生成相同标签加上*号即可，如div*3
      如果生成的div类名是有顺序的，可以用自增符号$
      如果有兄弟关系的标签，用+就可以了div+p
      如果生成带有类名或ID名字的，直接写.demo或#two 点tab键就可以了

     （7）默认目录结构：
        css：存放css文档-页面装修，文字颜色，字号，大小间距，排版
        img：存放图片-icon，logo、banner，产品图
        js：javascript-页面交互，轮播图，登陆注册验证，加载效果
        index：默认的网站首页​

     （8）注释符：ctrl+？

     （9）存储页面：ctrl+s

3. html5新特性

 HTML5 现在已经不是 SGML 的子集图像，位置，存储，多任务等功能的增加绘画 canvas用于媒介回放的 video 和 audio 元素本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失sessionStorage 的数据在浏览器关闭后自动删除语意化更好的内容元素，比如 article、footer、header、nav、section表单控件，calendar、date、time、email、url、search新的技术 webworker、websocket、Geolocation 移除的元素：纯表现的元素：basefont、big、center、font、s、strike、tt、u对可用性产生负面影响的元素：frame 、frameset 、noframes 支持 HTML5 新标签：IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签可以利用这一特性让这些浏览器支持 HTML5 新标签浏览器支持新标签后，还需要添加标签默认的样式当然也可以直接使用成熟的框架、比如 html5shim

4. 标签学习：

 （1）文件标签：构成html最基本的标签    

       * html:html文档的根标签
        * head：头标签。用于指定html文档的一些属性。引入外部的资源
        * title：标题标签。
        * body：体标签
        * ：html5中定义该文档是html文档

使用ico图标：首先把facicon.ico这个图标放到根目录下，在html的head里引入代码 		

（2）语义化标签（html5新的语意结构元素）

        
定义文档或节的页眉
定义文档的主要内容
定义文档内的文章
定义文档中的节
定义用户可查看或隐藏的细节（默认隐藏，点击查看）
定义details元素中的可见标题
定义对话框或窗口
定义自包含内容，比如图示、图标、照片、代码清单等（常用于图像与其描述组合）
定义重要或强调内容定义用户能够从弹出菜单调用的命令或菜单项目定义运行中的任务进度定义已知范围内的标量测量定义日期时间

语义化的理解

  用正确的标签做正确的事情！
  HTML 语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
  在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的。
  搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO 。
  使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解

（3）分割线标签

hr{width：200px；height：300pxborder：none（清除边框描边-默认自带）background-color：yellow}

（4）文本标签：和文本有关的标签

        空白折叠现象：

        html中所有文字内容之间的空格，换行，缩进都会被折叠成一个空格显示

        解决方法：空格符： （表示一个空格）

        其他特殊字符：
                        < ：<
                         > : >

预格式化标签：浏览器完整保留源文件中所定义的格式，包括换行、空格、缩进以及其他特殊格式

  
预格式化标签
 

标题标签h

（从1级标题到6级标题）,默认字体进行加粗，字号从h1到h6逐级递减
 ~ 

段落标签

   一段落一标签

 字节标签

 （用来包裹一小段或几个文字在同一行显示）

多行文本标签

 
（开始和结束标签之间不留空格）textarea{outline：0；取消轮廓线resize：none；防止拖拽文本域
}

滚动文字

 //需要设置宽高显示

强调加粗标签（自带加粗效果）

内容

  * ：字体加粗

内容

 一换行一标签

阻止超链接跳转链接地址：绝对地址：http协议（https://baidu.com）相对地址：新建的同级html页面（homework.html）
 #代表空链接 属性值：“_blank” 表示在在新标签页面打开链接/“_parent”上一级窗口打开/“_self”同一窗口打开，默认值/“_top”整个窗口打开/“_framename”框架或浮动框架名
设置鼠标悬停文本：指向链接时的提示信息a{
text-decoration：none；超链接下划线隐藏
}

         标签定义表格表格标题 （标题会居中显示在表格之上） 用于定义表格头部，用来放标题（定义表头-） 用来定义表格主体，放数据本体（定义表格行-几行）（定义表格单元-每列横向单元格内内容）标签组成放表格的脚注之类

 -第一行 第一列 第二列 ... 第二行 第三行 合并需删除
...
学生课程表
星期一
星期二
星期三
星期四
星期五
星期六
星期日
语文
数学
英语
物理
化学
生物
历史
语文
数学
英语
物理
化学
生物
历史

编号
姓名
成绩
小龙女
100
2
杨过

,插入图片

元素的垂直对齐方式（只针对于行内元素或行内块元素，一般用于图片对齐文字）
vertical-align: baseline（默认底部基线对齐）/
middle（垂直居中）/auto/top（顶部对齐）/bootom;

src 与 href 的区别 src 用于替换当前元素，href 用于在当前文档和引用资源之间确立联系。
 src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片和frame 等元素
 href 是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加
  那么浏览器会识别该文档为 css 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式来加载 css ，而不是使用 @import 方式

 热区形状shap：rect矩形/circle圆形/poly多边形coords与shap对应的坐标值：rect：x1，y1 x2，y2 （4个值）circle：center-x，center-y，radius（3个值）poly：x1，y1 x2，y2 ...（（n+1）*2个值）

(controls="controls"):播放控件(autoplay="autoplay"):自动播放（loop="loop"）：循环播放preload = "auto页面加载即加载视频/metadete只加载元数据/none不加载")视频在页面加载时进行加载，并预备播放（使用了autoplay则忽略该属性）poster="url地址" 视频加载时显示的图像，默认显示视频第一帧画面

play播放/pause暂停视频可以设置宽度(controls="controls"):播放控件(autoplay="autoplay"):自动播放（loop="loop"）：循环播放(preload="auto页面加载即加载视频/metadete只加载元数据/
none不加载")视频在页面加载时进行加载，并预备播放（使用了autoplay则忽略该属性）poster="url地址" 视频加载时显示的图像，默认显示视频第一帧画面 有些浏览器需设置宽高

 代表有序列表
列表项内容
 代表列表项（按先后顺序默认用阿拉伯数字标序号并先后排列）
简写方式：ol>li*2(表示ol标签里嵌套2个li标签)单击Tab键 快速生成

 代表无序列表（按先后顺序默认用实心圆点标注并列排列）
列表项内容
 代表列表项
li{list-style：none；} -列表符号隐藏

定义
名词
解释

:表单框

label 标签：用于绑定一个表单元素，当点击label标签的时候，被绑定的表单元素就会自动获得输入焦点。第一直种用法：label标签直接包括input标签（适合单个表单选择）  第二种用法：用for属性规定label与哪个表单绑定男

            取消边框：border：none取消外边框轮廓线：outline：none取消默认背景：background：none

disabled  规定输入字段应该被禁用readonly  规定输入字段只读（不可修改）required  规定输入字段必填pattern   规定通过其检查输入值的正则表达式正则表达式：pattern="^[1][3-8]+\\d{9}$"^表示一行的开始，$表示正则结束，[0-9]等价于\\d，{9}表示整数长度为任意的9个数字，+\\d表示正整数maxlength 规定输入字段的最大字符数max       规定输入字段的最大值min       规定输入字段的最小值size      规定输入字段的宽度step      规定输入字段的合法数字间隔value     规定输入字段的默认值

修改placeholder属性的样式input::-webkit-input-placeholder{ /*WebKit browsers*/
color: red;
}input::-moz-input-placeholder{ /*Mozilla Firefox*/
color: red;
}input::-ms-input-placeholder{ /*Internet Explorer*/ 
color: red;
}

内容
（部分浏览器可能不支持datelist属性.......）

value：（初始值）

（选择文件后并不能真正打开，只是将文件名回填到文件输入框内）

 //将一张图片作为按钮使用

（隐藏框不显示在表单中，随用户表单一起提交给服务器）

            .number （属性：max（可输入最大值）/min（可输入最小值））.email.color.date.time.datetime.datetime-local.month.week.range（滑动控件）.search.tel.url.multiple 可以多选文件提交.date pickers

:容器（盒子），打组标签-用于页面模块划分，包裹和分割模块，相当于打组。改变容器（内容的显示）位置：
align：改变内容的显示位置（center居中/left居左/right居右 ）div{ margin：0 auto；（上下边距为0，水平居中）}

可继承的属性：font-size font-faminly color
不可继承的样式：border,padding,margin,width,height

        字体颜色 color ：#666 ；字号大小 font-size：18px ；文本加粗（字重）font-weight：normal（等价于400）（常规字体）
/lighter（更细的-浏览器可能不支持）/bold（等价于700）（加粗）/bolder（更粗的-常用）；字体样式 font-style：normal（常规字体）/italic（倾斜）/oblique（更倾斜的-常用））；行高 line-height：27px （字体大小1.5倍起）；
单行文本在什么高度里上下垂直居中显示（设置文本行高等于父级标签高度，则文本对于标签垂直居中）字间距 letter-spacing：2px （默认为0，中文英文都适用）；词间距 word-spacing：4px （只适用于英文单词）；首行缩进 text-indent ：36px （字体大小两倍）；文本显示（水平-对齐）方式 text-align：left/center/right ；
（不止作用于文本，对行内块元素同样有效）（文本居中不能使用margin：0 auto）文本修饰 text-decoration ：overline 上划线/line-through 删除线
/underline 下划线/none取消文本修饰效果（取消超链接下划线）；英文大小写 text-transform：capitalize（开头首字母大写）
/uppercase（全部大写）/lowercase（全部小写）；文字字体 font-family：Ariel,“思源黑体”（各种字体之间必须使用英文状态下的逗号隔开；
中文字体需要加英文状态下的引号，当需要设置英文字体时，英文字体必须位于中文字体之前。）
（可以添加到通配符选择器里面——页面所有字体都确定了）；font：italic 700 20px "思源黑体"；
（总写，严格按照

标题标签
段落标签
有序列表
，
无序列表
，
自定义列表
div标签

超链接标签
字节标签

   display：block（展示转化为-块级元素）inline（展示转化为-行内元素）inline-block（展示转化为-行内块元素）none（属性展示-隐藏）

回流(重排): 当浏览器必须重新处理和绘制部分或全部页面时，回流就会发生重绘: 不影响布局, 只是标签页面发生变化, 重新绘制注意: 回流(重排)必引发重绘, 重绘不一定引发回流(重排)

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！