HTML学习笔记day1

C/s,B/s架构

C/s架构:C代表客户端,s代表服务器 是桌面应用程序如qq,lol
特点
1. 试用期必须安装
2. 不能跨平台
3. 软件更新时客户端和服务端都得更新
4. 软件采用的是自由协议,比较安全
B/s架构:B:浏览器,s:服务器 网站
特点
1. 使用前不需要安装,使用浏览器通过网址进行访问
2. 能过跨平台
3. 软件更新时,客户端不需要更新
4. 采用通用的HTTP协议,相对来说不安全


HTML头部

网页组成
HTML是超文本标记语言 Hyper Text Markup Language
HTML不是标记语言,而是一种标记语言,像XML
标记语言是一套标记标签
网页文档的头部:包含了文档的元数据
meta是HTML中的元标签,对应了HTML的相关信息,客户端浏览器会根据这些信息进行处理
作用:搜索引擎优化
定义页面使用语言,自动刷新并指向新的页面,为网站添加关键词、描述内容、作者。

<!--定义网站的搜索关键字(重要)--->
        <meta name="keywords" content="HTML,CSS,CS,JQUERY" />
        <!--对网站的一个简单概述(重要)-->
        <meta name="description" content="前端技术开发" />
        <!----作者--->
        <meta name="author" content="jiaoke" />

link标签

Link标签定义了文档与外部资源之间的关系
Link标签通常用于链接到样式表

<link rel="stylesheet" type="text/css" href="../css/index.css"/>

style

定义网页的内部样式style,放在头部

script

引用外部的JS文件


HTML基本标签

标题

HTML是超文本标记语言,Hyper Text Markup Language
HTML不是编程语言,而是标记语言。
标记语言就是一套标记标签 Markup tag
HTML使用标记标签来描述网页、HTML文档包含了HTML标签及文本内容
HTML文档也叫Web页面。
h1标题只能在一个网页中出现一次,前提是外面没有Hgroup标签

段落

link链接

title:定义元素的替换文本
target:属性
_blank:在新窗口中打开链接文档
_parent:在父框架集中打开被链接文档
_top:在整个窗口中打开被链接文档
值 在相同

<!--指向万维网上页面的链接-->
        <a href="http://www.baidu.com" target="_blank" title="百度">百度一下</a>
        <a href="http://www.souhu.com" target="_self">搜狐</a>
        <!----在本网页的谋克区域显示另外的网页----
            frameborder:是否显示边框,默认显示边框  0代表不显示,1代表显示
        ---->
`->

list列表

有序列表ol
ol>li
无序列表
ul>li
自定义列表
dl>dt>dd

图像

height与width属性用于设置图像的高度和宽度
alt属性用来为图像定义一串预备可以替换的文本
src:图片路径
title:鼠标梵高图片上,提示文本

<img src="../image/logo.jpg" width="409" height="200" alt="加载失败"  title="百度图片"/>

other

HTML区块

        1.块级元素:以新行来开始和结束 
              实例:h1 p ul table
        2.内联元素:不会以新行开始
              实例:b td a img

div元素:块级元素 可用于组合其他HTML元素的容器 div+css文档布局,独占一行
span元素:内联元素:用作文本的容器


HTML表格

HTML表结构:从语义结构上划分表格为:表头、表主体、表尾
caption:表格的标题
thead标签标识表格头部元素
tbody标签标识表格表体元素
tfoot标签标识表格表尾部分
cellpadding:表格中内容和单元格之间的距离
cellspacing:表格中单元格和单元格之间的距离
在默认情况下,如果不设置表格的边界,表格不显示边界的,可以用border属性设置表格边框

    <table border="1">
            <!-----表格的标题------->
            <caption><h2>学生成绩表</h2></caption>
            <tr>
                <!---表格的表头使用th定义-------->
                <th>学号</th>
                <th>高数</th>
                <th>语文</th>
                <th>政治</th>
            </tr>
            <tr>
                <td>1001</td>
                <td>90</td>
                <td>15</td>
                <td>20</td>
            </tr>
table,th,td{
                border-collapse:collapse;/*--表示边框合并到一起-->*/
            }

colspan:跨列(合并列)
rowspan:跨行(合并行)

猜你喜欢

转载自blog.csdn.net/weixin_42866348/article/details/81809233