八.Web基础

8.1B/S四部分

客户端、web、htttp协议、网页

web服务器：php语言对应apache，jsp语言对应tomcat,asp.net/asp对应iis,nodejs对应node.js，服务器需运行才能访问

http协议，request/response

web网页：结构（html）、样式（css）、行为（javascript）

8.2html

html介绍：超级文本呢标记语言

超文本：超越文本元素，包含图片视频、音乐、连接元素

w3c：规定web标准的一个组织

html学习的目的：标签的用途，标签在浏览器中的默认样式

html发展历史：html1.0,html2.0html3.0.html4.0,xhtml1.0,html5

xhtml:x指的时xml,语法规范更严谨，标准严格

xhtm语法规则：

1.标签与属性全部小写

2.标签必须闭合

3.属性=值，不能简写

4.标签的顺序要一致

后缀名：

html后缀;.html、.htm、.shtml（包含SSI技术，安全性高）和wendows系统有关，老板版本支支持3位后缀

html语法，属性理解

术语：元素、标签、属性

元素：指的时整体

标签：指的是标签名

属性：标签的一些属性

语义化L:

1.更容易被搜索引擎访问（seo）

2.更容易让屏幕阅读器读出网页内容

8.3html基本框架

dtd:文档类型定义

类型：S=Strict(严格型）、T=Translitional(过渡型）、F=Frameset(框架型)

<!DOCTYPE> #声明文档类型，作用是告诉浏览器用哪个标准来编译网页


标题


内容

8.4html基本标签

双标签，单标签
,html4中有哪些标签，html5兼容性支持哪些标签

/:根目录，或是文件的上一级

../:当前文件的上一级

./:当前文件夹

IDE集成开发环境，用的什么工具

文本标签:

p标签,段落标签</>
注意段落与段落行距大于段落内文字行距
b标签，加粗
strong标签,加粗，有加强语气，b标签呗淘汰
i标签，倾斜
em标签，倾斜，有加强语气，i标签被淘汰

换行标签，单标签

下划线标签，下划线
<q标签，引用，浏览器自动加引号/q>
段引用

预标签，显示你写格式

地址标签。自动生成地址格式，自动换行

<img 属性有src='地址'使用相对地址，图片不显示的时候会使用alt='替换文本' title='标题'with="300px"height="200px">图片标签，单标签
<a href="地址"，target=""属性值有_blank,_self>a标签，超链接标签
瞄点连接
1.定义锚点
2. -->
功能性连接：
连接腾讯javascript:发qq，
邮件mailto:123456@qq.com
块标签，就是一个容器，多个div自动换行

定义文档中的节，即结构

列表标签

    有序列表标签order list简写

<ol type=""属性值可以用A,1,a>水果
  • 香蕉

  • 苹果

  • 梨子

      • 无序列表标签unorder list简写
      <ul type="" 属性值默认为黑实体，circle空圆圈，square为实体正方形>水果
    • 香蕉

    • 苹果

    • 梨子


    自定义列表 define list简写


    计算机学院

    语文

    数学

    英语

    表格

    表格标签

    表头
    表格中的行
    表头单元格
    标准单元格
    注意：th,td有rowspan="3"占行,colspan=“2”占列
    <table border="1" height="100%" weight="100%" cellspacing="0"单元格间距 cellpadding="12"单元格内文字离框的距离>

    学科
    成绩


    语文
    100






    Document



    标签一


    标签二


    标签三


    标签四


    标签五

    标签六

    汉字是历史上最古老的文字之一。也是至今通行的世界上最古老的文字。
    世界上还没有任何一种文字像汉字这样经久不衰。 从甲骨文发展到今天的汉字，
    已经有数千年的历史。文字的发展经过了甲骨文、金文、大篆、小篆、隶书、草书、楷书、
    行书等书体演变。

    少小离家老大回，乡音无改鬓毛衰。儿童相见不相识，笑问客从何bai处来。

    少小离家老大回，乡音无改鬓毛衰。儿童相见不相识，笑问客从何bai处来。


    
网
    
页
    
你
    
好



    汉字是历史上最古老的文字之一。也是至今通行的世界上最古老的文字。
    世界上还没有任何一种文字像汉字这样经久不衰。 从甲骨文发展到今天的汉字，
    已经有数千年的历史。文字的发展经过了甲骨文、金文、大篆、小篆、隶书、草书、楷书、
    行书等书体演变。




    联系人：123
    地址：
    资阳市



    替换文本

    百度


    html5结构标签





    定义文档中的节，章节、页眉、页脚或文档中的其他部分。


    定义页脚

    8.5html标签

    1.图片标签


    img标签是一个单标签，只有起始标签
    src：图片的来源
    alt:提示文本，当图片不在的时候，会用文本提示
    width:设置图片宽度，单位像素，百分比
    height:设置图片高度，单位像素，百分比

    2.列表标签

    有序列表





    有序列表
    type属性值可以是:A,a,I,i,1;
    start属性值可以是:数字如2
    无序列表
    type属性值可以是：circle(空心圆)，square(实心正方形)，disc(实心圆)

    3.超链接标签

    a标签

    href:链接的地址
    href:
    name:链接的名字
    target:页面打开方式
    _blank在新窗口打开链接
    _self在当前窗口打开链接
    _top在层级窗口中打开链接
    _father在父级窗口中打开链接
    锚点链接：

    跳转链接到，锚点a


    锚点a


    锚点结合iframe标签使用，实现在当前页面打开网页
    第一集

    4.标题标签

    标题标签，从大到小h1-h6

    标题标签

    5.水平分割线

    hr标签

    水平分割线

    6.文字标签化标签

    加粗标签b标签，strong标签
    加粗，只是加粗
    加粗标签，有强调语气，语义化，方便阅读器感情朗读
    定义大号
    倾斜标签，强调语气，语义化
    斜体标签
    定义下标
    定义上标
    下划线
    删除线
    定义删除字

    7.特殊字符

    空格: 
    两个空格： 
    小于:<
    大于：>
    &符号：&
    双引号："
    乘号：×
    除号：&divideo;

    8.span标签

    span标签
    文字容器标签,行内元素，不会自动换行

    9.段落标签

    p标签,段落标签

    段落标签，用于文本段落，块级标签，可以自动换行

    10.单行代码标签

    code标签
    a + b = c

    11.多行标签，预期标签

    pre标签，用于直接显示预期的格式


    
1
    
2
    
3

    12.音频、视频标签

    audio音频标签

    src:音频链接地址
    controls:显示控制台
    autoplay:自动播放，此属性已经被禁用了

    video音频标签

    src:音频链接地址
    controls:显示控制台
    autoplay:自动播放，此属性已经被禁用了
    multed:静音效果

    13.浮动框架

    iframe标签，用于将另外一个网页嵌入到当前网页,与a标签的target属性连用合适

    src:打开的网页地址
    frameborder:边框值只有0/1
    name:用于和a标签的target对应
    width:框架宽度
    height:框架高度

    14.路径问题

    相对路径：
    ./当前路径
    ../上级目录，或者父级目录
    绝对路径：
    本地：d://imgs/img/a.jpg
    服务器：/root/www/img/1.img

    块级元素与行内元素特点：

    块级元素特点：
    1.块级元素，独占一行，多个块级元素会自动换下一行
    2.块级元素可以用来布局页面
    3.块级元素可以嵌套其他块级元素和行内元素，p，h标签有点特殊

    行内元素特点：
    1.行内元素不会自动换行，多个行内元素处于一行时，不会自动换行，只有一行占据满了才会换行
    2.行内元素不能布局
    3.行内元素不能嵌套块级元素，可以嵌套行内元素

    8.6表格标签

    table表格标签


    border:边框属性
    width:表格宽度
    cellspacing:单元格间距
    cellpadding:文字距单元格内部距离
    caption表格的标题标签

    tr是表格的行标签，每行都有,里面可以加入行标题，或者单元格



    th行标题标签，文字会加粗



    td单元个标签



    注意：rowspan指的是占据几行，当rowspan="2"时，就是指的占据两行，前一行单元格属性中加入rowspan="2"，下一行对应位置的单元格则删除
    cowspan指的是占据几列，当cowspan="2"时，就是指的占据几列，当前行的第一个元素写入cowspan="3",右边的则删除

    语义标签，html会自动添加

    例子

    学习时间表
    行标题
    行标题

    单元格标签





























    学习时间表
    星期一 星期二 星期三 星期四 星期六 星期日
    语文 数学 英语 历史 政治 休息
    语文 数学 英语 历史 政治
    晚自习

    8.7Form表单

    1.form标签

    form表单标签,双标签，input标签单标签
    <form action="提交的网页地址" method="提交方法" name="名字


    action:提交的网页地址链接
    method:提交方式，GET/POST
    name:定义名字

    2.文本输入标签

    3.文本密码输入框

    4.range属性框

    5.表单提交

    submit属性，用于登录、注册、提交、搜索

    6.表单重置按钮

    7.单选

    radio属性：
    name值必须设置成一样，不然没法在一组
    checked属性，默认选项
    男孩
    女孩

    8.label标签

    label标签和单选一起使用，可以在选择文字的时候选择到

    9.多选

    checkbox属性：
    name值必须设置成一样，不然没法在一组
    checked属性，默认选项



    10.普通按钮

    这个普通按钮不会重置，只有加了js才能实现重置

    11.button标签

    type属性：submit,button,reset,只有submit才有提交功能


    12.文件上传

    type属性为file时注意
    1.form mehod属性为POST
    2.entype加密方式:multipart/form-data



    13.select列表标签

    下拉列表中的特殊属性
    option中的selected：默认选中属性
    selection中的multed:多选，按住ctrl+选中多个

    14.文本域

    textarea标签
    需要设置：cols属性，rows属性

    15.几个特属性

    reaonly:只读属性
    required:必须填写
    disabled：禁止属性

    16.图片按钮

    17.其他标签

    1.输入eamil
    required：必须填写属性
    邮箱：
    2.输入url
    required：必须填写属性
    url：
    3.输入tel
    required：必须填写属性
    tel：
    4.日期

    5.颜色
    你喜欢的颜色

    18.分组标签

    legend和fieldset标签



    个人信息：

    姓名：
    年龄：
    学历：

    8.8html其他语义标签

    1.多级标签，加强语气



    标题1



    标题2



    2.header标签
    3.artical文章标签，用于文章，可以布局用
    4.aside侧边栏标签，artical标签外的可以用
    5.section章节标签，章节标签，用于文档区域
    6.footer脚部标签
    7.blockquote引用标签，用于引用其他源的块应用
    posted @ 2021-03-13 11:29  faval  阅读(103)  评论(0)    收藏  举报