html和css的较量

    • web结构的组成
    • html标签规则
    • 快速生成一个html
    • html的基本结构
    • 标签的关系
    • 标签
      • 标题标签
      • 段落
      • 图片
      • 超链接 a
    • 属性
    • a标签里面的值
    • 字符实体
    • 新增的标签
      • 1）iframe
      • 2）div
      • 3）spam
      • 4）格式化标签
      • 5)预格式化标签 pre
      • 音频 audio/视频video
    • 三大列表
      • 无序列表
      • 有序列表
      • 无序列表

web结构的组成

  • html：超文本标记语言

  • css： 层叠样式表 美化页面

  • javascript：轻量级的脚本编程语言（行为和动态）

html标签规则

  • 关键字由 尖括号包裹

  • 成对出现，由开始标签和结束标签组成（结束标签多一个反斜杠/） 
    例：

<p>段落</p>

基本上都是双标签，但是还有一类比较特殊，叫“单标签”、“自闭和标签”、“空标签”

<img src="图片路径"/>
<input type="text" />

快速生成一个html

  • 新建一个xx.html的文件

  • 输入法 调到英文状态下

  • 在编辑区输入感叹号 ！+enter

html的基本结构

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="keywords" content="关键字">
<meta name="description" content="描述">
<title>网页名称</title>
</head>
<body>
展示内容
</body>
</html>

标签的关系

  • 包含

  • 并列

标签

标题标签

标题标签可以分为六级，从h1-h6，从表象上看：粗细相同，都是加粗的，字号逐次递减；从优化程度上来说，重要程度也是逐次递减，h1一般用在logo的部分

<!--快捷生成 h$*6{标题$} -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

段落

<p>段落</p>

图片

  • src：图片地址

  • alt：图片加载失败 出现代替文字

  • title：鼠标滑上，会出现跟随文字

<img src="" alt="图片加载不成功 显示" title="图片名称">

超链接 a

  • target：

    • _self ：当前窗口打开

    • _blank：在新窗口打开

属性

描述一定的特征和功能的就是属性，属性可以分为内置属性和自定义属性，

  • 一个标签的属性是可以有多个的

  • 属性与属性之间需要有 空格

  • 没有顺序关系

<img src="" alt="小破孩" title="名称" index="2>

a标签里面的值

  • 普通的网址

  • 可以回到顶部 href=“#”

  • 刷新 href=“ ”；

  • href=”javascript:;“禁止跳转

  • 锚点跳转 
    点击某个链接文字，想跳转到对应的模块，可以给每个模块设置一个id名字，让相应的a标签的href值等于这个id的名字（别忘了加#）

<a href="#"> 回到顶部</a>
<a href="">重新加载</a>
<a href="#id">回到目的id位置</a>
<a href="javascript:;">禁止跳转</a>

字符实体

字符实体有字符编号和字符名称

新增的标签

1）iframe

内嵌网页

<iframe src="xxx.html" frameborder="1" width="500" height="600"></iframe>

2）div

大盒子标签，用来划分区域（块级元素）

3）spam

小盒子标签，用来划分小区域（行内元素）

4）格式化标签

标签自带一定的样式

  • 斜体： i、em

  • 加粗 ：b、strong

  • 删除线：s、del

  • 下划线：ins 、u

    i/em都表示斜体，b、strong表象上都是加粗，从优化程度上，em和strong(语义化更强烈一些)要比i、b更重要

5)预格式化标签 pre

会安装编辑区里面预先设置好的格式显示在页面上

<h3>预格式化标签</h3>
<pre>
*** ***
（） （）
***
</pre>

音频 audio/视频video

+ src 资源路径
+ controls控制器
+ loop 循环播放
+ autoplay 自动播放
<audio src="qt.mp3" controls loop autoplay></audio>
<video src="212.mp4" controls loop autoplay></video>

三大列表

注意：三大列表都是固定样式，ul 和ol里面紧邻着一定式li，如果需要其他标签，可以放到li里面。dl里面紧邻着一定式dt和dd，如果需要其他标签，可以放到dt dd里面

无序列表

ul li 都是固定样式

<!--无序列表 -->
<ul>
<li><a href="http://www.baidu.com"> 最新动态：come on baby</a></li>
<li>最新动态：come on baby</li>
<li>最新动态：come on baby</li>
<li>最新动态：come on baby</li>
</ul>

有序列表

<!-- 有序列表 -->
<ol>
<li><span>1</span> 最新动态：come on baby</li>
<li><span>2</span> 最新动态：come on baby</li>
</ol>

无序列表

<dl>
<dt>关于我们</dt>
<dd><a href="">官网</a> </dd>
<dd><a href="">备站</a></dd>
<dd><a href="">联系我们</a></dd>
<dd><a href="">客服答疑</a></dd>
<dd><a href="">故事</a></dd>
</dl>

前端小白的学习之路html与css的较量【一】的更多相关文章

  1. 前端小白的学习之路html与css的较量【二】

    标签的划分 块级元素 独占一行 设置 宽 高可以起作用 排列方式: 上下排列 行内元素 可以共占一行 设置 宽 高 不起作用,大小由内容决定 排列方式:左右排列 行内块 可以共占一行 可以设置宽 高 ...

  2. web前端全栈学习之路

    web前端全栈学习之路 --- 陆续更新中 一.HTML相关 1.HTML常用标签:http://www.cnblogs.com/wyb666/p/8733699.html 2.HTML5基础: 3. ...

  3. 前端小白webpack学习（二）

    前一篇写了自我总结的webpack定义:为JavaScript服务的静态模块打包器 和几大基本概念 entry.output.plugins.loaders等.指路前端小白webpack学习(一) 下 ...

  4. 前端小白webpack学习（一）

    俗话说得好,好记性不如烂笔头. 之前就在学习中看过webpack的教程,然而一段时间没用,火速的忘光了.写这篇博文,做个总结,也让自己以后有个地方回顾. 看webpack之前,我先去看了一下官方文档, ...

  5. 小白的学习之路（hello wold！）

    Hello word ! 一直想写博客,但是都拖延了,正好两天有假期就开始弄这个事情了.开始觉得写博客也没有什么,一路学习以来都是看别人的博客进行学习,也收藏了不少博客,学到了不少东西,所以我觉的博客 ...

  6. Web前端 web的学习之路2

    2019 年 Web 开发技术指南和趋势 2019/01/23 · JavaScript · 趋势 转载:原文出处: 李棠辉(http://web.jobbole.com/95622/)    以下内 ...

  7. Web前端 web的学习之路

    零基础学习web前端的顺序 ( 转载自:https://blog.csdn.net/weixin_41780944/article/details/83751632) 怎么开始学习两条路:自学或者找培 ...

  8. 一个python小白的学习之路

    本人是个网管,在佛山工作,现在已经学习了一段时间python了,还是学开基础,但近段时间有一点的突破出来了,找到了一个很好的自学视频,等自己有能力了就想找一个特训班试试.已经看了视频两个星期了,有小小 ...

  9. 偏前端-vue.js学习之路初级（一）概念

    首先--不推荐新手直接使用 vue-cli,尤其是在你还不熟悉基于 Node.js 的构建工具时.    新建一个html,引入一下js: <!-- 开发环境版本,包含了有帮助的命令行警告 -- ...

随机推荐

  1. MySql多表查询_事务_DCL(资料三)

    今日内容 1. 多表查询 2. 事务 3. DCL 多表查询: * 查询语法: select 列名列表 from 表名列表 where.... * 准备sql # 创建部门表 CREATE TABLE ...

  2. Python的web开发

    一.Web开发 Tcp   udp       Cs即客户端.服务器端编程,客户端和服务器端之间需要使用socket,约定协议.版本(协议使用的是tcp或者udp).Tcp协议和udp协议,指定地址和 ...

  3. Bi-shoe and Phi-shoe LightOJ - 1370(数论+素数筛）

    题目链接:https://vjudge.net/problem/LightOJ-1370 题意:给你N个欧拉函数值,找出每一个大于等于该欧拉函数值的数,并且要求相加和最小. 题解:因为素数i的欧拉函数 ...

  4. 【博弈论】组合游戏及SG函数浅析

    目录 预备知识 普通的Nim游戏 SG函数 预备知识 公平组合游戏(ICG) 若一个游戏满足: 由两名玩家交替行动: 游戏中任意时刻,合法操作集合只取决于这个局面本身: 若轮到某位选手时,若该选手无合 ...

  5. VS2015上OpenCV-2.4.13安装与Hi35xx .jpg/.bmp格式转.bgr格式开发

    因为Hi3559AV100后期深度学习开发需要用到.bgr格式的图片,而目前在手的一般为.jpg或.bmp格式的图片,下面随笔将给出基于OpenCV-2.4.13的格式转换,实现Hi35xx .jpg ...

  6. 10 分钟轻松学会 Jackson 反序列化自动适配子类

    作者:丁仪 来源:https://chengxuzhixin.com/blog/post/Jackson-fan-xu-lie-hua-zi-dong-shi-pei-zi-lei.html json ...

  7. 攻防世界 reverse 进阶 9-re1-100

    9.re1-100 1 if ( numRead ) 2 { 3 if ( childCheckDebugResult() ) 4 { 5 responseFalse(); 6 } 7 else if ...

  8. 密码学系列之:csrf跨站点请求伪造

    目录 简介 CSRF的特点 CSRF的历史 CSRF攻击的限制 CSRF攻击的防范 STP技术 Cookie-to-header token Double Submit Cookie SameSite ...

  9. springboot源码解析-管中窥豹系列之BeanDefine如何加载（十三）

    一.前言 Springboot源码解析是一件大工程,逐行逐句的去研究代码,会很枯燥,也不容易坚持下去. 我们不追求大而全,而是试着每次去研究一个小知识点,最终聚沙成塔,这就是我们的springboot ...

  10. Android Studio 之 CheckBox

    •任务 •基本用法 CheckBox,复选框,即可以同时选中多个选项. 从网上找了三个图标,分别命名为 apple.jpg , banana.jpg , oranges.jpg 放置在了 drawab ...