Web学习历程记录（五）——HTML

最新推荐文章于 2022-08-14 17:56:21 发布
最新推荐文章于 2022-08-14 17:56:21 发布
阅读量280 收藏
点赞数
分类专栏： 笔记 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_49658603/article/details/108277547
版权
这篇博客详细记录了HTML的学习过程，包括结构部分的head、title和body标签，HTML语法规范，以及标签属性和各类标签的使用。此外，还介绍了CSS的基础，如div和span的使用，CSS的选择器和盒子模型，并给出了谷歌搜索页面的代码实现例子。
摘要由CSDN通过智能技术生成

Web学习历程记录（五）

HTML

超文本标记语言

结构

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
</body>
</html>
head标签

指定网站的标题
指定网站的关键字/指定网站的描述信息
外挂一些外部的css/js文件
添加一些浏览器适配的相关内容

title标签

专门用于指定网站标题，并且这个指定的标题将来还会作为用户保存网站的默认标题

body标签

用于定义HTML文档中需要显示给用户查看的内容

HTML语法规范

扩展名是html或者htm
html标签不区分大小写
标签可以嵌套标签一般由起始标签开始，结束标签终止，但如果标签不修饰内容，可以在标签里结束

标签属性

属性属于标签，修饰标签，让标签有更多效果
属性一般定义在起始标签里面
属性一般以 “属性 = 属性值”的形式存在
属性值一般用“或者”括起来

标签

排版标签
<!--字体标签-->
<font color = "字体颜色" size = "字体大小(1~7)" face = "字体风格"></font>
<!--标题标签，n取值1~6-->
<hn>标题</hn> 
<!--段落标签-->
<p>段落</p>
<!--粗体标签-->
<b>内容</b>
<!--斜体标签-->
<i>内容</i>
<!--下划线标签-->
<hr/>
<!--下划线标签-->
<br/>
<!--插入图片-->
<img src = "图片路径" width = "宽" height = "高" alt = "图片描述" title = "用于告诉浏览器，当鼠标悬停在图片上时，需要弹出的描述框中显示声明内容"/>
<!--无序列表-->
<ul type = "类型">
    <li>需要显示的条目内容</li>
    ...
</ul>
<!--有序列表-->
<ol type = "类型" start = "起始索引">
    <li> </li>
    ...
</ol>
<!--超链接-->
<a href = "指定需要跳转的目标路径" target = "打开的方式">需要展示的内容</a>
<a href="#">假链接</a>
<!--表格标签-->
<table border = "1px" width = "" height = "" bgcolor = "">
   <tr>
       <td></td>
   <tr>
<table>
<!--合并单元格-->
colspan
rowspan
<!--其他标签-->
<table>
  <caption>表格标题</caption>
  <tr>
     <th>第一列标题</th>
     <th>第二列标题</th>
     <th>第三列标题</th>
  </tr>
</table>

路径
相对路径就是每次都从html所在文件开始查找
同级
同级就是图片跟html文件在同一文件
src = “xxx.jpg”
src = “./xxx.jpg”
./代表当前目录

上级
上级就是“存储图片的位置”和“存储代码的文件夹”在同一个文件夹中，且必须在一个盘
src = “…/xxx.jpg”
…/代表找到当前文件夹的上一级文件夹

绝对路径就是每次都从指定的盘符开始查找

插入图片练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>案例二</title>
</head>
<body>
<h1>家用电器排行榜</h1>
<img src="../img/tv01.jpg"/>
<font size="3">创维42AFET 42英寸</font>
<hr/>
<img src="../img/tv02.jpg"/>
<font size="3">海信 42英寸</font>
<hr/>
<img src="../img/tv03.jpg"/>
<font size="3">TCL 40英寸</font>
<hr/>
<img src="../img/tv04.jpg"/>
<font size="3">TCL 56英寸</font>
<hr/>
<img src="../img/tv05.jpg"/>
<font size="3">小米 56英寸</font>
<hr/>
</body>
</html>

超链接和无序列表练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>友情链接</h1>
<ul>
    <li><a href="#">百度</a></li>
    <li><a href="#">哔哩哔哩</a></li>
</ul>
</body>
</html>

表格练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1px" width="50%" bgcolor="#ffe4c4" align="center">
    <tr bgcolor="#8a2be2">
        <td bgcolor="#f5f5dc">1</td>
        <td>2</td>
    </tr>
    <tr bgcolor="black">
        <td>1</td>
        <td>2</td>
    </tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1" width="800" align="center">
    <caption><h1>今日小说排行榜</h1></caption>
    <tr bgcolor="#8a2be2">
        <th>排名</th>
        <th>关键名</th>
        <th>趋势</th>
        <th>今日搜索</th>
        <th>最近七日</th>
        <th>相关链接</a></th>
    </tr>
    <tr align="center">
        <td>1</td>
        <td>西游记</td>
        <td><img src="../img/down.jpg"></td>
        <td>345</td>
        <td>23466</td>
        <td><a href="#">点击进入，看你想看</a> </td>
    </tr>
    <tr align="center">
        <td>1</td>
        <td>红楼同人</td>
        <td><img src="../img/up.jpg"></td>
        <td>3242</td>
        <td>723423</td>
        <td><a href="#">点击进入，看你想看</a> </td>
    </tr>
    <tr align="center">
        <td>1</td>
        <td>海底两万里</td>
        <td><img src="../img/up.jpg"></td>
        <td>4366</td>
        <td>73734</td>
        <td><a href="#">点击进入，看你想看</a> </td>
    </tr>
    <tr align="center">
        <td>1</td>
        <td>羊脂球</td>
        <td><img src="../img/down.jpg"></td>
        <td>12315</td>
        <td>124551</td>
        <td><a href="#">点击进入，看你想看</a> </td>
    </tr>
    <tr align="center">
        <td>1</td>
        <td>葛朗台</td>
        <td><img src="../img/up.jpg"></td>
        <td>325</td>
        <td>12862</td>
        <td><a href="#">点击进入，看你想看</a> </td>
    </tr>
</table>
</body>
</html>

扩展

锚点
通过a标签跳转到指定的位置

<a = "xx"></a>
<a href = "#xx"></a>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a id="a"></a>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<img src="../img/banner_1.jpg" width="500px" height="20000px">
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<a href="#a">回到顶部</a>
</body>
</html>

图片链接
在标签a中放入图片链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="http://www.baidu.com">
    <img src="../img/guowai_1.jpg"><br/>
    百度
</a>
</body>
</html>

详情和概要标签

<details>
    <summary>张三</summary>
    <p>他身高177</p>
    <p>他会飞</p>
</details>

注册页面案例

表单标签
action：提交路径，默认是当前页面
method：提交方式，常用的是get和post，默认get

get和post区别
get请求参数跟在请求地址（地址栏可以看见）后面
get请求相对不安全
get请求对参数大小有限制

<form action="http:www.baidu.com" method="post">
</form>
form常见子标签

input：输出流，通过type属性来指定类型
select：选择列表
textarea：文本域

输入类型
<input type = "xxx"/>

type属性
text：文本输入框
password：密码域
submit：提交按钮
reset：重置按钮
button：空白按钮
radio：单选框
checkbox：复选框
hidden：隐藏字段
file：文件

选择菜单

<select name = "">
   <option value = "">显示的内容</option>
</select>

option:选择菜单的选项

name在select里面指定
value在option里面指定
option定义在select里面

textarea文本域

<textarea rows = "20" cols = "30" name = "introduce"></textarea>

cols：列
rows：行

通用属性
name
作为单选和多选框的分组
作为key上传到后台程序。后台程序通过key得到对应的value。如果要把数据提交到后台程序，一定要指定name属性

value
给按钮起名字
设置提交到服务器的值 name = value

设置默认值
text，password：通过value属性
radio checkbox：通过checked属性
select：在option上通过selected属性
textarea：直接在标签体中写

练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="http:www.baidu.com" method="get">
    用户名：<input type="text" name="username"/><br/>
    密码：<input type="password" name="password"/><br/>
    性别：<input type="radio" name="sex" value="男"/> 男
    <input type="radio" name="sex" value="女"/> 女<br/>
    爱好：<input type="checkbox" name="hobby" value="打篮球"/>篮球
    <input type="checkbox" name="hobby" value="足球"/>足球
    <input type="checkbox" name="hobby" value="排球"/>排球<br/>
    图像：<input type="file" name="icon"><br/>
    籍贯：<select name="address">
    <option value="深圳">深圳</option>
    <option value="上海">上海</option>
    <option value="北京">北京</option>
</select><br/>
    自我介绍：<br/><textarea rows="20" cols="30" name="introduce"></textarea><br/>
    <input type="submit"/><input type="reset"/>
    <input type="button"/>
</form>
</body>
</html>

扩展
新增的type类型

<input type="submit"/><input type="reset"/>
<input type="button"/>
<input type="color">
<input type="date">
<input type="email">
<input type="number">
<input type="search">
<input type="tel">
<input type="url">
<input type="range">

Div CSS

div span

div是html里面的一个标签
没有特定的含义，作为容器，配合css完成网页的基本布局

span也是一个标签，没有特定的含义，一般作为文本容器

div和span的区别
div是块级元素，独占一行
span是行内元素不会独占一行
div中可以嵌套其他所有标签
span中只能嵌套文本/图片/超链接

CSS

什么是CSS
层叠 样式表
层叠：样式的层层叠加
样式表：样式的集合

CSS功能
美化页面

CSS语法
{
属性：属性值 属性值；
属性：属性值 属性值；
}

注意：
属性和属性值用：连接
如果有多个属性值用空格隔开

如果有多个属性，属性和属性之间用；隔开 最后一个；不写

html和css常见的结合方式

通过标签的style属性来结合

<p style = "属性名称：属性；..."></p>

通过style标签来结合

<head>
   <style type = "text/css">
   标签名称{
      属性名称：属性对应的值
   }
   </style>
</head>

注意点：
style标签必须写在head标签的开始标签和结束标签之间(也就是必须和title标签是兄弟关系)
style标签中的type属性可以不写，默认就是type=“text/css”
设置样式时必须按照固定的格式来设置，冒号和分号不能省略

通过link标签结合
创建一个css文件
通过link标签引入
link标签属性：css文件路径

<head>
    <link rel="stylesheet" href="../../csss4/myCss.css">
</head>

三种结合方式优先级
就近原则

选择器

控制html标签

盒子模型

谷歌搜索页面代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>谷歌搜索页面</title>
    <style>
        div{
            text-align: center;
        }
        .right button{
            background-color: #4584F3;
            color: white;
            border: none;
            border-radius: 5px;
            width: 50px;
            height: 28px;
        }
        .right{
            float: right;
            margin: 28px;
        }
        .header{
            clear: both;
        }
        .header .link{
            margin-top: 10px;
        }
        .content{
            margin-top: 20px;
        }
        .content input[type = 'text']{
            width: 400px;
            height: 30px;
        }
        .content input[type = 'button']{
            width: 100px;
            height: 30px;
        }
        .content .viki{
            margin-top: 20px;
        }
        .content .map{
            margin-top: 60px;
        }
        .footer{
            margin-top: 120px;
        }
        .footer .ad{
            margin-top: 20px;
        }


    </style>
</head>
<body>
<div class="right">
    <a href="#">Gmail</a>
    <a href="#">图片</a>
    <button>登录</button>
</div>
<div class="header">
    <div class="logo">
        <img src="../img/loge.png">
    </div>
    <div class="link">
        <a href="#">全 部</a>
        <a href="#">地 图</a>
        <a href="#">图 片</a>
        <a href="#">视 频</a>
        <a href="#">新 闻</a>
        <a href="#">音 乐</a>
        <a href="#">更 多</a>
    </div>
</div>
<div class="content">
    <div class="search">
        <input type="text"/>
        <input type="button" value="谷歌一下">
    </div>
    <div class="viki">
        <a href="#">维基百科</a>
        <a href="#">维基文库</a>
        <a href="#">自由的图书馆</a>
        <a href="#">更 多 >></a>
    </div>
    <div class="map">
        <img src="../img/ic.jpg">
        <a href="#">谷歌地图带你吃喝玩乐</a>
    </div>
</div>
<div class="footer">
    <div><a href="#">把谷歌设为首页</a></div>
    <div class="ad">
        <a href="#">广告</a>
        |
        <a href="#">商务</a>
        |
        <a href="#">大全</a>
        |
        <a href="#">条款</a>
    </div>
</div>
<div> @2018 Goole 提供</div>
</body>
</html>
萝北大芋头
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
网页数据分页怎么显示在一个页面_Web Scraper 翻页——利用 Link 选择器翻页 | 简易数据分析 14
weixin_39811478的博客
11-24 587
这是简易数据分析系列的第 14 篇文章。本文首发于博客园：Web Scraper 翻页——利用 Link 选择器翻页今天我们还来聊聊 Web Scraper 翻页的技巧。这次的更新是受一位读者启发的，他当时想用 Web scraper 爬取一个分页器分页的网页，却发现我之前介绍的分页器翻页方法不管用。我研究了一下才发现我漏讲了一种很常见的翻页场景。在 web scraper 翻页——分页器翻页的文...
HTML 学习记录（四）
little_w98biubiu的博客
05-07 70
结构化语义标签： Content sectioning 显示效果上没有区别，仅仅是在语义上有区别 div 、span <body> <!-- 网页的头部,可以有多个头部,也可以用来表示网页中某一部分的头部 --> <header></header> <!-- 网页主体，页面中只有一个 --> <main></main> <!-- footer 网页底部...
Web学习历程记录（七）——Tomcat
qq_49658603的博客
09-03 217
Web学习历程记录——Tomcat Web 静态Web资源 指Web页面中供人们浏览的数据始终是不变的 动态Web资源 指web页面中供人们浏览的数据是由程序产生的，不同时间点访问web页面看到的内容各不相同 软件架构 C/S架构 Client/Server 客户端和服务器端，用户需要安装专门的客户端程序 B/S架构 Browser/Server 浏览器和服务器端，不需要安装专门的客户端程序，浏览器是操作系统内置 B/S和C/S交互模型的比较 相同点： 都是基于请求，相应交互模型。且必须先有请求，再有响应
Web学习历程记录（六）——JS
qq_49658603的博客
09-02 129
Web学习历程记录（六）——JS JS基本概念 JavaScript时运行在浏览器前端的脚本语言，它不需要编译，通过浏览器解释就可以执行，它的解释被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言 HTML与用户没有交互功能，网页只能看，不能操作。JavaScript用来制作web页面交互效果，提升用户体验 web前端三层： 结构层 HTML：描述页面结构 样式层 CSS：美化页面 行为层 JavaScript：从交互的角度，提升用户体验 JS组成部分： ECMAScript，描述了
Web学习历程记录（十五）——vue
qq_49658603的博客
10-10 121
vue 使用vue，对message赋值，并把值显示到页面 <script> new Vue({ el:'#use', data:{ message :"helloworld" } }); </script> data:用来定义数据 methods:用于定义的函数，可以通过return来返回函数值 click点击事件 <!DOCTYPE html> <html lang="en"
Web学习历程记录（九）——请求响应
qq_49658603的博客
09-08 213
Web学习历程记录（九） 案例一：完成文件下载 HttpServletReaponse概述 在Servlet API中，定义了一个HttpServletReaponse接口，它继承自SeveletResponse接口，专门用来封装HTTP响应消息 Http响应消息分为响应行，响应消息头，消息体三部分 对应的在该接口中定义了向客户端发送响应状态码、响应头、响应体的方法 操作响应三部分 操作响应行 一般是第一行 常用的状态码： 200：成功 302：重定向 304：访问缓存 404：客户端错误 500：服务器错
Web学习历程记录（十一）——JSP
qq_49658603的博客
09-22 125
JSP 概述 Java server page jsp的本质就是Servlet 执行原理 jsp会翻译成Servlet(.java).Servlet编译成class文件 流程 第一次访问jsp文件的时候，服务器收到请求，jspServlet会去查找对应的jsp文件 找到之后，服务器会将这个jsp文件转换成java文件(Servlet) 服务器编译java文件，生成class文件 服务器运行class文件，生成动态的内容 服务器收到内容后返回给浏览器 基本语法 <% … %>java程序片段 &l
Web学习历程记录（十二）—— filter_listener
qq_49658603的博客
10-04 137
fileter_listener fileter 一个实现了特殊接口的Java类，实现对请求资源(jsp,servlet,html)的过滤功能 过滤器是一个运行在服务器的程序，优先于请求资源(Servlet或者jsp,html)之前执行，过滤器是javaweb技术中最为实用的技术 作用 对目标资源(Servlet,jsp)进行过滤 ...
Web学习历程记录（十）—— cookie/session
qq_49658603的博客
09-08 163
会话 常用的会话技术 Cookie 是客户端技术，程序把每个用户的数据以cookie的形式写给用户各自的浏览器。当用户使用浏览器再去访问服务器中的web资源事务，就会带着自己的数据去。这样，web资源处理的就是用户各自的数据了 Session 是服务端的技术，服务器为每个浏览器开辟一块内存空间，即session。由于内存空间是每一个浏览器独享的，所有用户访问的时候，可以把信息保存在session对象中。同时，每一个session对象对应一个sessionid，服务器把sessionid写到cookie中，再
Web开发入门经典——使用PHP6、Apache和MySQL.rar
06-24
这份"Web开发入门经典——使用PHP6、Apache和MySQL"的教程资源将帮助初学者理解这三个工具的基本概念和实际应用。 PHP（Hypertext Preprocessor）是一种广泛使用的开源服务器端脚本语言，尤其适合于Web开发。PHP6，...
tech:个人技术记录器
04-10
【技术记录器——个人知识库建设】 在信息技术领域，个人技术记录器是一种高效的学习和工作管理工具，它帮助我们整理、归档以及回顾所学的知识和技术。标题"tech:个人技术记录器"揭示了这个压缩包的核心内容，即一...
html5使用canvas绘制孙悟空猴哥来拜年特效源码.zip
最新发布
11-04
9. **版本控制**：源码中可能包含了版本控制信息，如Git提交记录，可以帮助我们了解项目的开发历程和更新内容。 通过学习和分析这个源码，开发者不仅可以掌握Canvas的基本用法，还能深入理解如何将动画、交互和传统...
安卓Android源码——libgdx-0.9.6.zip
10-14
通过学习和使用"安卓Android源码——libgdx-0.9.6.zip"中的内容，开发者可以深入了解LibGDX的工作原理，提升游戏开发效率，同时也可以根据自身需求进行定制和扩展，实现更多创新功能。无论是初学者还是经验丰富的...
\Web开发和J2EE简介.pdf
08-25
Tim Berners-Lee的著作《织网》详细记录了万维网的发展历程。 #### 二、超文本传输协议（HTTP） HTTP协议是万维网上应用最广泛的协议之一，用于客户端（如Web浏览器）与服务器之间的数据交换。当用户通过Web浏览器...
【博学谷学习记录】超强总结，用心分享 | 产品经理项目竞品分析
qq_49658603的博客
08-14 2642
对coingecko的竞品分析。
【博学谷学习记录】超强总结，用心分享 | 产品经理内容项目的知识点回顾与梳理
qq_49658603的博客
07-31 443
学习过内容产品的相关内容后，一些学习总结。
【博学谷学习记录】超强总结，用心分享 | 产品经理电商项目知识点总结与回顾
qq_49658603的博客
08-07 374
学习过电商项目的相关内容后，一些学习总结。
【博学谷学习记录】超强总结，用心分享 | 产品经理基础阶段学习回顾总结与分享（一）
qq_49658603的博客
07-01 351
学习博学谷产品经理基础阶段视频后，一些知识点的总结与个人见解。
HTML5移动Web开发实战指南
"HTML5移动Web开发指南，由...总体来说，《HTML5移动Web开发指南》全面覆盖了HTML5在移动Web领域的各个方面，结合实践案例，有助于读者快速掌握HTML5的核心技术和实际应用，是学习和进阶HTML5移动开发的重要参考资料。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值