进击のpython

*****

前端学习——body标签

接着上一节，我们看一下还有没有什么网址

果不其然，在看到新闻类的网址的时候

我们发现还有许多的不一样的东西！

使用ul，添加新闻信息列表

这个样子是什么做出来的呢？？？

前面有个点，后面有文字，其实这是列表

（新开一个项目，不要用上一节的项目了）

这一连串的信息其实谁上谁下都无所谓，所以也叫无序列表<ul></ul>（我猜的unorder）

那单单只有列表没有用，我们还要规定一下每一列的信息

line information → <li></li>(我是用来这么记忆的)

那我们应该拿到的代码就是这样的：

<body>

<ul>

    <li>美政客公然对香港事务指手画脚 中方:不惧怕任何威胁和恫吓</li>

    <li>这样养猪国家最高补助500万 多条硬措施稳"猪" 二师兄稳住!</li>

    <li>华西秋雨今日达鼎盛 南方“秋老虎”威力不减</li>

    <li>农业农村部农田建设管理司司长卢贵敏接受审查调查</li>

    <li>检察机关对国家烟草专卖局原副局长赵洪顺案提起公诉</li>

</ul>

</body>

效果如下：

诶？你发现没有？人家的方块小！还是方的！还是蓝色的！

这其实就要引到过几天要说的CSS了

像上面的大小啊，样式啊，颜色啊，其实都是CSS的杰作

CSS就像是html骨架的衣服，让骨架更加好看

所以现在我们不纠结样式

使用ol，添加热门点击排行榜

既然有无序的，就会有有序的：

很明显这是有序的，那有序的要怎么做呢？<ol></ol>（我猜的order）

还是一样的，要规定一下每一列的信息<li></li>

<body>

<ol>

<li>国办：将生育医疗费用纳入医保支</li>

<li>美国两艘军舰穿越台湾海峡 中方已就此向美方</li>

<li>江苏盐城响水爆炸事故：政府承诺负责所有受损</li>

<li>世界第一高坝双江口水电站首仓混凝土浇筑中国</li>

<li>人社部决定取消73项由规范性文件设定的证明</li>

<li>盐城响水“3·21”爆炸事故受影响学校全部复课中</li>

<li>盐城响水爆炸事故环境进展：苯、甲苯、二甲苯</li>

</ol>

</body>

效果如下：

还是那句话，样式不一样不要纠结~

学习table标签，认识网页中的表格

这部分像不像Excal的表格呢？那这是怎么做的呢？html中有个<table></table>标签实现此功能

像列表一样，有了行才有表格的概念

首先要有个表头：

<body>

<table>

    <tr>

        <th>名称</th>

        <th>当前价</th>

        <th>涨跌幅</th>

    </tr>

</table>

</body>

可以看出，他还帮着加粗了一下，tr就是table row 表行；th 就是table head 表头

那现在有了表头，接下来就是完善表格：

<body>

<table>

    <tr>

        <th>名称</th>

        <th>当前价</th>

        <th>涨跌幅</th>

    </tr>

    <tr>

        <td>中兴通讯</td>

        <td>36.840</td>

        <td>&uArr;10.00%</td>

    </tr>

    <tr>

        <td>京东方A</td>

        <td>4.100</td>

        <td>&uArr;4.86%</td>

    </tr>

    <tr>

        <td>大智慧</td>

        <td>9.210</td>

        <td>&uArr;10.04%</td>

    </tr>

    <tr>

        <td>沪电股份</td>

        <td>27.550</td>

        <td>&uArr;2.49%</td>

    </tr>

    <tr>

        <td>中信证券</td>

        <td>24.320</td>

        <td>&uArr;0.70%

        </td>

    </tr>

    <tr>

        <td>中国广核</td>

        <td>4.770</td>

        <td>&uArr;0.42%</td>

    </tr>

</table>

</body>

这td table data 表数据

边框 boder

但是跟Excel比，没有边框对吧~我们可以简单对表格设置属性boder

<table border='1'>....</table>

(如果你想让边框更小~你可以用<table cellspacing='0' border='1'>......</table>)

表格标题caption

当然，如果你想给这个表格设计一个标题，可以使用<caption></caption>

用来描述表格内容，标题的显示位置：表格的上方

<table>

    <caption>标题文本</caption>

    <tr>

        <td>…</td>

        <td>…</td>

        …

    </tr>

…

</table>

表格合并colspan&rowspan

Excel就有合并单元格的操作，那网页有没有合并单元格的操作呢？

你都能想到，html能想不到吗？所以推荐了两种方法：

colspan 纵向合并

将两个竖着的单元格合并在一起，要写出来占几个单元格

<body>

<table cellspacing="0" border="1">

    <caption>股票行情</caption>

    <tr>

        <th>名称</th>

        <th colspan="2">当前价/涨跌幅</th>

    </tr>

    <tr>

    ... ...

rowspan横向合并

那类比一下

<body>

<table cellspacing="0" border="1">

    <caption>股票行情</caption>

    <tr>

        <th>序号</th>

        <th>名称</th>

        <th colspan="2">当前价/涨跌幅</th>

    </tr>

    <tr>

        <td rowspan="3">1</td>

        <td>中兴通讯</td>

        <td>36.840</td>

        <td>&uArr;10.00%</td>

    </tr>

    ... ...

学习img标签，为网页插入美丽的图片

千呼万唤始出来，第一个自己写的文章就要结束了

我们首先把文章出现的图片down下来，然后放在和程序同级的目录

<img src="图片地址" alt="下载失败时的替换文本" title='提示文本'>

... ...

<p>记者从上海迪士尼乐园管理方了解到，园方管理团队正积极与相关方面沟通，将在继<br>

    续聆听各方意见和建议的基础上，于下阶段推出包括入园安检和外带食物政策等方面<br>

    的多项举措，进一步完善园区运营，优化游客体验。</p>

<img src="1.jpeg" alt="">

<p>

    上海迪士尼度假区保安、安全、消防和健康服务部总监薛斌君表示：“我们理解目前的<br>

    入园安检流程可能会给部分游客带来不适感。园方管理团队一直在积极听取各方反<br>

    馈，并在相关部门的支持指导下，认真研究优化安检流程，以达到两大重要目标：第<br>

    一也是一切的前提，即确保游客和演职人员的安全；第二，为我们的游客提供更为舒<br>

    适的体验。”</p>

    ... ...

src:图片的位置
alt:指定图像的描述性文本，当图像不见时(下载不成功时)，可看到该属性指定的文本。
title:鼠标滑过图片时显示的文本
图像可视GIF,PNG,JPEG格式的图像文件

*****
*****

前端学习（四）：body标签（二）的更多相关文章

前端学习(一) body标签(上)
body标签中相关标签主要内容: 字体标签: h1~h6.<font>.<u>.<b>.<strong><em>.<sup> ...
前端学习之jquery（二）
操作元素(属性,css,文档处理) 1.1 属性操作 --------------------------属性 $("").attr(); $("").remo ...
前端学习之 Bootstrap（二）
一.代码内联代码:用<code>包裹,但是需要用<和>表示尖括号. 键盘输入:用<kbd>包裹表示键盘输入的内容. 多行代码:用<pre>包裹多行代码 ...
前端学习(一) body标签(下)
今日主要内容: 列表标签 <ul>.<ol>.<dl> 表格标签 <table> 表单标签 <fom> 一.列表标签列表标签分为三种. 1 ...
前端学习之 CSS（二）
五:继承性和层叠性 css有两大特性,即继承性和层叠性. 1. 继承性面向对象语言都会存在继承的概念,在面向对象语言中,继承的特点:继承了父类的属性和方法.那么我们现在主要研究css,css就是在设 ...
大前端学习笔记整理【二】CSS视觉格式化模型
1. 概念在视觉格式化模型中,文档树中的每个元素都将会根据盒模型产生零到多个盒子.这些盒子的布局由如下因素决定: 盒子的尺寸和类型定位策略(正常文档流,浮动或者绝对定位) 和文档树中其他元素的关系 ...
前端学习（六）：body标签（四）
进击のpython ***** 前端学习--body标签关于前面的都是大部分的标签内容但是就像衣服一样,除了要有,还要放到适当的位置我们先来看看一下网页的布局: 就可以看出来,网页都是一块一块的 ...
前端学习（二）：head标签
进击のpython ***** 前端学习--head标签 head标签中的相关标签,是看不见摸不着的,仅仅是对应用于网页的一些基础信息(元信息) 前面说的是青春版,完整的head应该是这样的 !< ...
前端学习第四弹： HTML（一）
前端学习第四弹: HTML(一) 元素分类:块元素内联元素块级元素在浏览器显示时,通常会以新行来开始(和结束). 例子:<h1>, <p>, <ul>, &l ...

随机推荐

入门大数据---Flume的搭建
一.下载并解压到指定目录崇尚授人以渔的思想,我说给大家怎么下载就行了,就不直接放连接了,大家可以直接输入官网地址 http://flume.apache.org ,一般在官网的上方或者左边都会有Do ...
python 给视频添加马赛克
用法: 1. 创建空文件夹:imgs 2. 将倒数第三行中的"222056.mov"改为你的视频路径,如:"a.mov" 3. 运行以下代码 4. 稍等片刻,鼠 ...
python文件处理-将图像根据坐标画矩形标记
内容涉及:文件遍历,选取csv后缀文件,用cv操作图片 import csv import os import sys import numpy as np import copy import sh ...
Demo_2：Qt实现猜字小游戏
1 环境系统:windows 10 代码编写运行环境:Qt Creator 4.4.1 (community) Github: 2 简介参考视频:https://www.bilibili.co ...
CF55D Beautiful numbers 题解
题目 Volodya is an odd boy and his taste is strange as well. It seems to him that a positive integer n ...
Xshell6 优化
Xshell6 优化
【MySQL】Merge Index导致死锁
水稻:最近有个朋友生产环境出现MySQL死锁问题,一听是死锁,那必须去看看啊,于是饶(si)有(qu)兴(huo)致(lai)的研究了好几天菜瓜:MySQL死锁,赶紧分享一下水稻:能否先让我装完X ...
记录一下安装hexo的过程
记录一下安装hexo的过程首先你的电脑需要安装node.js和Git 安装好Git之后需要配置本机与Github之间的ssh方便更新同步博客到Github上,在一个地方新建一个文件夹作为我们博客的根 ...
博弈论 | 详解搞定组合博弈问题的SG函数
本文始发于个人公众号:TechFlow,原创不易,求个关注今天这篇是算法与数据结构专题的第27篇文章,我们继续深入博弈论问题.今天我们要介绍博弈论当中非常重要的一个定理和函数,通过它我们可以解决许多 ...
属性复制神器-mapstruct
我们之前说到项目中会用到各种object,vo,bo,dto等等.我们需要在不同的对象上复制属性. 一.BeanUtils和PropertyUtils 我们最常用的就是Common包里面的BeanUt ...

前端学习（四）：body标签（二）