Web复习笔记

web前端复习

前端引入

前端的发展历程:美工 网页制作 Web前端开发 全栈开发 大前端

大前端作用:网站(PC 移动端) 管理系统 APP 小程序 数据可视化 智能电视 桌面应用 网页游戏 工具和后端(node)

网页为啥叫HTML

蒂姆·伯纳斯·李制定W3C规则
网页是网站的一页 文件扩展名html
HTML是超文本标记语言 用来描述网页的一种语言 不是编程语言是标记语言(标记标签来描述网页)

浏览器

can i use网站
常见浏览器:Opra欧朋 Firefox火狐 Internet explorer IE浏览器→Edge浏览器 Safari苹果 Chorme谷歌 QQ浏览器

Web标准的制定

万维网联盟 World Wide Web Consortium(W3C)
W3C制定HTML的语法,标准 CSS的语法,标准
W3C和ECMA制定了行为标准 W3C DOM,ECMAScript
HTML结构 CSS表现 JS行为

第一个网页

html head title body之间的关系
固定的结构
基本语法:常规标记(双标记)<标记> 空标记(单标记)<标记 />

相关工具

HTML编写工具:SublimeText Webstorm HBuilderX VSCode AdobeDreamweaver
VSCode相关插件:Auto Rename Tag view-in-browser Live Server

文档声明与字符统计

DOCTYPE html>     
<html lang="en">    
<head>
    <meta charset="UTF-8">  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
body>
html>

HTML标签

Web语义化:裸奔好看 爬虫喜欢 方便维护

HTML标签:

文本标题(h1-h6)格式

内容


文本标题标签自带加粗,有自己的文本大小,并且独占一行,有默认间距

段落标签(p)格式

内容


标识一个段落(段落与段落之间有段间距)

换行(br)格式

换行是一个空标记(强制换行)

水平线(hr)


加粗(b)格式(strong)格式
b只是显示加粗 strong强调内容突出文本

倾斜(em)格式(i)格式
em强调文本 i倾斜文本

删除线(s)格式(del)格式

下划线(u)格式

下标与上标(sub)格式(sup)格式

百科词条案例

DOCTYPE html>
<html lang="zh-CN中文">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
<h1>HTML5h1>  
<p>本词条由“科普中国<strong>"科学百科"词条编写与应用工作项目strong>审核。<br>p>
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是<strong>构建以及呈现互联网内容的一种语言方式.strong><br>
被认为是互联网的核心技术之一。HTML产生于1990年,1997年HTML4成为互联网标准,并广泛应用于互联网应用的开
<br>发。<br>
HTML5是Web中核心语言HTML的规范,<em><strong>用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的strong>em>,在浏览器中<br>
通过-些技术处理将其转换成为了可识别的信息。HTML5在从前<del>HTML4.01del>的基础上进行了一定的改进,虽然技术人员在开发<br>
过程中可能不会将这些新技术投入应用,但是对于该种技术的新特性,网站开发技术人员是必须要有所了解的。
<sup>[1-2]sup><br>
<h2>HtmI5的新特性h2>
<hr>hr>
HTML5将Web带入一个成熟的应用平台,在这个平台上,<strong>视频、音频、图像、动画以及与设备的交互strong>都进行了规范。
<h3>智能表单h3>
表单是实现用户与页面后台交互主要组成部分,HTML5在表单的设计上功能更加强大。input类型和属性的多样性大大地增<br>
强了HTML可表达的表单形式,再加上新增加的一些表单标签, 使得原本需要JavaScript来实现的控件,可以直接使用HTML5<br>
的表单来实现; - -些如内容提示、焦点处理、数据验证等功能,也可以通过THML5的智能表单属性标签来完成。<sup>[6]sup>
<h3>多媒体h3>
HTML5最大特色之一就是支持音频视频, 在通过增加了audio. video两个标签来实现对多媒体中的音频、视频使用的<br>
支持,只要在Web网页中嵌入这两个标签,而无需第三方插件(如Flash) 就可以实现音视频的播放功能。HTML5对音频、 视频<br>
文件的支持使得浏览器摆脱了对插件的依赖,加快了页面的加载速度,扩展了互联网多媒体技术的发展空间。

body>
html>

Web复习笔记_第1张图片

不一般的hr



color→颜色
width→宽度
align→对其方式
noshade→取消阴影

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <hr color="red">
    <hr color="green">
    <hr color="blue">
    <hr color="black" width="300px">
    <hr color="black" width="300px" align="left">
    <hr color="black" width="300px" align="right">
    <hr noshade="noshade">
body>
html>

特殊符号

特殊符号:在编写文本是,会遇到输入法无法输入的字符,如®(注册商标),©(版权符)等,还要在一段文字中加入多个空格时,页面无法解析出多个空格.这些无法输入和空格字符都是特殊字符,HTML中有专门的代码.

特殊字符 含义 特殊字符代码
  空格符   ;
© 版权 © ;
® 注册商标 ® ;
< 小于 < ;
> 大于 > ;
& 和号 & ;
¥ 人民币 ¥ ;
° 摄氏度 ° ;
< 左尖角号 < ;
> 右尖角号 > ;

网页特殊符号(HTML字符实体)大全

div和span标签

div标签,没有具体含义,用来划分页面的区域,独占一行。
span标签,没有实际意义,主要应用在对文本独立修饰的时候,内容有多宽就占用多宽的空间距离。

列表

有序列表:

  1. li里面可以随意放标签,但ol里面只能放置li

    type属性:改变前面标记的样式(一般通过CSS去控制)


      1数字有序列表 a小写字母顺序列表 A大写字母顺序列表 i小写罗马字母列表 I大写罗马字母列表

      start开始 但属性取值一定为数字(超过26则在第一个的基础上加)

      无序列表:

      ul>li快捷输入

      • ul里面只能放li,li里面可以放其他标签

        type属性:改变前面标记的样式(一般通过CSS去控制)


          disc 实心圆 circle 空心圆 square 实心方块 none没有

          自定义列表:

          快捷输入:dl>dt+dd

          可以是文字也可以是图

          图片标签的路径

          注释

          相对路径:相对路径是指以当前文件资源所在的目录为参照基础,链接到目标文件资源(或文件夹)的路径.

          以“./"开头,代表当前目录和文件目录在同一个目录里,“./"也可以省略不写!

          以"…/"开头:向上走一级,代表目标文件在当前文件所在的上一级目录.

          以"…/…/"开头:向上走两级,代表父级的父级目录,也就是上上级目录,再说明白点,就是上一级目录的上一级目录.

          以"/"开头,代表根目录.

          绝对路径:从根目录开始,是一个完整的路径.

          “D:/abc/”:代表根目录,绝对路径.

          ·在windows中路径斜线/与反斜线\都可表示,在网络路径中必须/ 尽量避免写反斜线\

          注释:如果使用服务器打开,本地路径无法访问

          图片标签的属性

          路径

          超链接标签

          内容

          Target属性:规定在何处打开文档 target="_self"默认值 target=“_blank"新窗口打开

          表格:

          标签:

          :表格的最外层容器
          :定义表格行
          th:定义表头
          td:定义表格单元
          :定义表格标题

          属性:

          1.宽度 width .
          2.高度 height
          3.边框 border
          4.边框颜色 bordercolor
          5.背景颜色 bgcolor
          6.水平对齐 align=“left或 right或center”
          7.cellspacing=“单元格与单元格之间的间距”
          8.cellpadding=“单元格与内容之间的空隙”

          行tr 属性

          1.高度 height
          2.背景颜色 bgcolor
          3.文字水平对齐 align=“left或 right或center”
          4.文字垂 直对齐 valign=“ top或middle或bottom";

          单元格td属性

          1.宽度width
          2.高度height
          3.背景颜色bgcolor
          4.文字水平对齐 align= “left或right或center"
          5.文字垂直对齐valign=“top或middle或bottom";
          如果一个单元格设置宽度,影响的是这一整列的宽度
          如果一个单元格设置高度,影响的是这一整行的高度

          表格合并

          Colspan="所要合并的单元格的列数” 必须给td
          Rowspan=“所要合并的单元格的行数” 必须给td

          表格实例

          DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <meta http-equiv="X-UA-Compatible" content="IE=edge">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <title>Documenttitle>
          head>
          <body>
              <table border="1" cellspacing="0" cellpadding="0"align="center" bordercolor="red">
                  <tr height="50" align="center">
                      <td width="100">会员注册td>
                      <td width="150">td>
                      <td width="100">出生日期td>
                      <td width="150">td>
                  tr>
                  <tr height="50">
                      <td>身份证号td>
                      <td colspan="3">td>
                  tr>
                  <tr height="50">
                      <td>通信地址td>
                      <td colspan="3">td>
                  tr>
                  <tr height="50">
                      <td>联系电话td>
                      <td colspan="3">td>
                  tr>
                  <tr height="50">
                      <td>会员卡号td>
                      <td colspan="3">td>
                  tr>
              table>
          body>
          html>
          

          Web复习笔记_第2张图片

          表单标签



          A.属性type定义输入框的类型
          a)文本框 type=“text”
          密码框type=“password”
          b) 提交框type=“submit" 和 一样
          c) 按钮框type=“button” 单纯的按钮
          d) 重置框type= “reset” 清空的效果
          B. 属性 placeholder描述输入字段预期值的简短的提示信息。兼容到IE8以上

          C. 属性 name必须设置,否则在提交表单时,用户在其中输入的数据不会被发送给服务器
          D.属性 value

          CSS内部样式表

          1)每个CSS样式由两部分组成,即选择符和声明,声明又分为属性和属性值
          2)属性必须放在花括号中,属性与属性值用冒号连接
          3)每条声明用分号结束
          4)当一个属性有多个属性值的时候,属性值与属性值不分先后顺序,用空格隔开
          5)在书写样式过程中,空格、换行等操作不影响属性显示

          选择器(选择符){属性:属性值; 属性:属性值;}

          ### 外部标签

          扩展知识点:link和import之间的区别?

          ①差别1:本质的差别:link属于XHTML标签,而@import完全是CSS提供的一种方式。

          ②差别2:加载顺序的差别:当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁),网速慢的时候还挺明显。

          ③差别3:兼容性的差别:@import是CSS2.1提出的,所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。

          行内样式表

          我是DIV

          样式表的优先级

          !important>行内>内部>外部

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