11.HTML课堂笔记

## web概念概述 \* JavaWeb： \* 使用Java语言开发基于互联网的项目 \* 软件架构： 1. C/S: Client/Server 客户端/服务器端 \* 在用户本地有一个客户端程序，在远程有一个服务器端程序 \* 如：QQ，迅雷... \* 优点： 1. 用户体验好 \* 缺点： 1. 开发、安装，部署，维护 麻烦 2. B/S: Browser/Server 浏览器/服务器端 \* 只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序 \* 优点： 1. 开发、安装，部署，维护 简单 \* 缺点： 1. 如果应用过大，用户的体验可能会受到影响 （传输文件太多 带宽要求） 2. 对硬件要求过高 \* B/S架构详解 静态网站 动态网站 \* 资源分类： 1. 静态资源： \* 使用静态网页开发技术发布的资源。 \* 特点： \* 所有用户访问，得到的结果是一样的。 \* 如：文本，图片，音频、视频, HTML,CSS,JavaScript \* 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器 。浏览器中内置了静态资源的解析引擎，可以展示静态资源 2. 动态资源： \* 使用动态网页技术发布的资源。 \* 特点： \* 所有用户访问，得到的结果可能不一样。 \* 如：jsp/servlet,php,asp... \* 如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器 \* 我们要学习动态资源，必须先学习静态资源！ \* 静态资源： \* HTML：用于搭建基础网页，展示页面的内容 \* CSS：用于美化页面，布局页面 \* JavaScript：控制页面的元素，让页面有一些动态的效果 JQuery就是原生javascript语法的一个封装 ## HTML ### 1.概念 是最基础的网页开发语言 \`\`\`\` java \* Hyper Text Markup Language 超文本标记语言 \* 超文本: \* 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本. \* 标记语言: \* 由标签构成的语言。\<标签名称\> 如 html，xml \* 标记语言不是编程语言 解释型 编译型 java-编译-\>class-解析-\>执行 *** ** * ** *** [![]() \`\`\`\` ### 2.基础语法 \`\`\`\`html \* 语法：https://www.runoob.com/ 1. html文档后缀名 .html 或者 .htm 2. 标签分为 1.围堵标签：有开始标签和结束标签。如 2.自闭和标签：开始标签和结束标签在一起。如 1.块级标签--》会导致下一个标签换行展示 *** ** * ** *** 2.行级标签 3. 标签可以嵌套： 需要正确嵌套，不能你中有我，我中有你 错误：]() 正确： 4. 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来 5. html的标签不区分大小写，但是建议使用小写。 \* 代码： title Hello World Hello World \`\`\`\` ### 3.标签学习 #### 1\>文件标签 \~\~\~\~ html \* html:html文档的根标签 \* head：头标签。用于指定html文档的一些属性。引入外部的资源 title：标题标签。 \* body：体标签 \* ：html5中定义该文档是html文档 html参考手册 功能排序 行级标签 不会自动换行 不能设置宽高 块级标签 会自动换行 可以设置宽高 \~\~\~\~ #### 2\>文本标签 \~\~\~\~html 文本标签：和文本有关的标签 \* 注释： ctrl+/ \* to === ###### ：标题标签 块级标签 \* h1\~h6:字体大小逐渐递减 \* ：段落标签 块级标签 \* ：换行标签 行级标签 \* *** ** * ** *** ：展示一条水平线 块级标签 \* 属性：(不推荐标签中加属性) \* color：颜色 \* width：宽度 \* size：高度 \* align：对其方式 \* center：居中 \* left：左对齐 \* right：右对齐 \* **：字体加粗 行级 \* *：字体斜体 行级 \* :字体标签 行级 color size face 字体样式 \* :文本居中 \* 属性： \* color：颜色 \* size：大小 \* face：字体 \* 属性定义： \* color： 1. 英文单词：red,green,blue 2. rgb(值1，值2，值3)：值的范围：0\~255 如 style="color: rgb(0,0,0)"白色 3. #值1值2值3：值的范围：00\~FF之间。如： #FF00FF \* width： 1. 数值：width='20' ,数值的单位，默认是 px(像素) 2. 数值%：占比相对于父元素的比例 \~\~\~\~ ### 案例 \~\~\~\~html 案例：公司简介 蜗牛学院简介 公司简介 ==== *** ** * ** *** "只为成就更好的你"是由***蜗牛学院***蜗牛确实慢，经过11年的沉淀和积累，才有了现在的蜗牛学院。公司法人代表邓强先生萌生成立公司之际就说过新公司一定要叫蜗牛，因为蜗牛代表慢，踏实，勤奋，坚持，有执行力，永不言弃。我们要始终坚持创新人才的培养模式，像蜗牛一样，决不妥协。十年树木，百年树人，人才培养过程一定不能盲目求快。最最关键的，蜗牛虽然渺小，却有大大的梦想。在这个快节奏的时代，我们要做一个稳扎稳打的蜗牛，给用户提供最优质的服务。 我们希望重新定义职业教育的人才培养模式，让我们的学员以在蜗牛学院学习过为荣，让所有的移动互联网企业不再为人才所困。我们愿做一片绿叶，为创新提供人才，帮助客户成长。通过打造充满执行力，创造力，想象力的团队，不断的创新、探索、实践，为客户创造最有价值的产品和服务。蜗牛学院，只为成就更好的你！ 任何靠实力生存的行业都不适合投机者，IT行业更是如此，只有沉下心来踏踏实实学习，稳步的提升技能才是根本，所以就更不能被所谓的高薪、高就业率假象所迷惑，这些都是行业激烈竞争的所带来的结果，其实现实一直都静静的放在那里，只是很多人愿意去相信"捷径"的存在，而主观上选择了无视客观真相。也许你会有疑问蜗牛学院有什么不同，为了尽可能的防止学员对自己定位不清而误打误撞选择来学习最后造成损失。简要概括来讲我们做了如下几点：1.蜗牛学院并不接纳所有学员，不能交钱就来学习，需要通过对应的考核和评测；2.严苛的管理制度，即便入学后一旦老师发现该学员不适合学习，会立即退费并劝退；3.大量的免费学习视频及零基础班试学机会，用于帮助学生探究自己是否适合从事IT行业。做了这样大量工作的原因是因为我们一直致力于筛选掉一些有诸如投机心理，不劳而获等等不正心态的学员，因为我们知道虽然可以获得短暂的经济收益，但最后这些学员很难获得应有的好结果，我们要做的就是从根源杜绝学生"花钱买工作"的心态。除了心态不正的原因以外，还有很多同学不可否认是不适合从事IT行业的，所以大量的免费学习资源是为了帮助这部分学员了解自己是否真正适合学习IT，而不要因为别人的怂恿而冒然选择，最后让自己蒙受时间与金钱上的双重损失，这对于一个人的自信心也会受到一定的打击，从长远来讲对个人的发展也是不利的。 感谢你能够读完这封信，也谢谢你对蜗牛学院的支持，也许现在的我们都不是最好的，但我们会一直努力，相信你一定也是。蜗牛学院，只为成就更好的你！ *** ** * ** *** 成都蜗牛创想职业技能培训学校有限公司 版权所有 © 成都蜗牛创想职业技能培训学校有限公司 备案： 蜀ICP备19000433号-3 网络文化经营许可证 \~\~\~\~ #### 3\>图片标签 \~\~\~\~html img：展示图片 行级 单标签 \* 属性： \* src：指定图片的位置 \* alt:当图片不能正常展示时 显式的内容 \* title:图片正常展示时 鼠标放上显式的说明文字 \* width height 可以设置图片宽高 但是会导致图片变形 \* 代码：    \~\~\~\~ #### 4\> 列表标签 \~\~\~\~html 列表标签：外层标签 内部标签 都是块级标签 \* 有序列表： \* ol: 属性 默认是1 2 3 4 type="A" start="3" 从第几个开始 \* li: \* 无序列表： \* ul: 属性：默认实心 type = "disc" square circle \* li: \* 以图片做项目符 \* 如果不需要li标签前面的项目符 * 手机 平板 \* 自定义列表 标题信息 : 说明信息1 : 说明信息2 \~\~\~\~ #### 5\>链接标签 \~\~\~\~html 链接标签：行级标签 \* a:定义一个超链接 \* 属性： \* href：指定访问资源的URL(统一资源定位符) ../ \* target：指定打开资源的方式 \* _self:默认值，在当前页面打开 \* _blank：在空白页面打开 \* 代码： [点我](https://www.woniuxy.com) [点我](https://www.woniuxy.com) [点我](https://www.woniuxy.com) [列表标签](./5_列表标签.html) [联系我们](mailto:3333333@woniu.cn) [](https://www.woniuxy.com) \* 锚链接： 目标位置编写锚记 {#命名} 超链接 [跳转](页面路径#name值) style="text-decoration:none" 取消下划线 cursor:wait; 改变鼠标移入后状态 \~\~\~\~ #### 6\>div span \~\~\~\~html div和span： \* div:每一个div占满一整行。块级标签 \* span：文本信息在一行展示，行内标签 内联标签 \* 行级标签 不会自动换行 一般不设定宽高 由内容决定 行级变块级 display:block 中国万岁 \* 块级标签 会自动换行 一般要设定宽高 块级变行级 向左浮动 或者 向右浮动 float:left Hello World =========== 块级变行级后 会对后续元素产生影响 如果后续元素希望回归标准文档流 则可以使用清除样式 清楚之前的浮动产生的影响 \~\~\~\~ #### 7\>语义化标签 \~\~\~\~ html 语义化标签：没有样式 html5中为了提高程序的可读性，提供了一些标签。 1. ：页眉 2. ：页脚 \~\~\~\~ #### 8\>表格标签 \~\~\~\~html 表格标签： \* table：定义表格 \* width：宽度 \* border：边框 \* cellpadding：定义内容和单元格的距离 \* cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、 \* bgcolor：背景色 \* align：对齐方式 \* tr：定义行 \* bgcolor：背景色 \* align：对齐方式 \* td：定义单元格 \* colspan：合并列 \* rowspan：合并行 \* th：定义表头单元格 \* ：表格标题 \* ：表示表格的头部分 \* ：表示表格的体部分 \* ：表示表格的脚部分 | 编号 | 姓名 | 成绩 | |----|-----|-----| | 1 | 小龙女 | 100 | | 2 | 杨过 | 50 | [学生信息表] \~\~\~\~ #### 9\>表单标签 \~\~\~\~ html 表单： \* 概念：用于采集用户输入的数据的。用于和服务器进行交互。 \* form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围 \* 属性： \* action：指定提交数据的URL \* target="_self" _block \* method:指定提交方式 \* 分类：一共7种，2种比较常用 \* get： 1. 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。 2. 请求参数大小是有限制的。 3. 不太安全。 \* post： 2. 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解) 2. 请求参数的大小没有限制。 3. 较为安全。 \* 表单项中的数据要想被提交：必须指定其name属性 \* 表单项标签： \* input：可以通过type属性值，改变元素展示的样式 \* type属性： \* text：文本输入框，默认值 \* outline: none; 取消默认边框 \* placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息 \* password：密码输入框 \* radio:单选框 \* 注意： 1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。 2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值 3. checked属性，可以指定默认值 4.设置id 给说明文字加for \* checkbox：复选框 \* 注意： 1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值 2. checked属性，可以指定默认值 \* number min最小值 max最大值 step每次跳几个 \* file：文件选择框 \* hidden：隐藏域，用于提交一些信息。 \* 按钮： \* submit：提交按钮。可以提交表单 \* reset：重置表单中的信息 \* button：普通按钮 \* image：图片提交按钮 \* src属性指定图片的路径 \* label：指定输入项的文字描述信息 \* 注意： \* label的for属性一般会和 input 的 id属性值 对应。如果对应了，则点击label区域，会让input输入框获取焦点。 \* select: 下拉列表 设置name \* 子元素：option，指定列表项 设置value \* textarea：文本域 设置name \* cols：指定列数，每一行有多少个字符 \* rows：默认多少行。 \* style = "resize:none" 锁定大小 提交 可以提交其他form表单元素 \~\~\~\~ ### 案例 品润旅游***