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. 擅用ABAP错误捕捉，避免系统Dump

    有时候我们在写程序时,会因为计算公式不符合算术表达式,计算公式的字段值不是纯数值等等问题造成程序dump,这个时候我们在无法避免字段赋值错误的情况下,又不想程序dump可以采取catch异常的方法进行 ...

  2. 2018ICPC南京 A. Adrien and Austin

    题目: 题意:1-N个石子每次只能取连续的1-K个问输赢.(一开始以为只是个简简单单的巴什游戏,激动的提交了一发wr了,再读了一遍题才发现是只能取连续的) 题解:当n==0或者k==1&&am ...

  3. 最短路径(Floyd算法）

    声明:图片及内容基于https://www.bilibili.com/video/BV1oa4y1e7Qt?from=articleDetail 多源最短路径的引入 Floyd算法 原理 加入a: 加 ...

  4. 详解php中函数的引用传递和返回 （附代码）

    本篇文章带大家了解一下php的引用,详细介绍一下函数的引用传递和引用返回.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助.php的引用(就是在变量或者函数.对象等前面加上&符号 ...

  5. Dynamics CRM分享记录后出现关联记录被共享的问题

    Dynamics CRM的权限配置有许多的问题,其中分享功能也是未来解决标准功能分配的权限不满足需求而设计的.但是这个功能使用的时候也要注意,否则会出现其他记录被共享的问题导致数据泄露可能会对项目的安 ...

  6. 【2w字干货】ArrayList与LinkedList的区别以及JDK11中的底层实现

    1 概述 本文主要讲述了ArrayList与LinkedList的相同以及不同之处,以及两者的底层实现(环境OpenJDK 11.0.10). 2 两者区别 在详细介绍两者的底层实现之前,先来简单看一 ...

  7. 22. VUE 插槽-详解

    插槽 一直对插槽不理解,今天学习,并整理一下,希望日后可以灵活运用. (一)插槽内容 先简单来个例子,看一下插槽的租作用. 1.1 不使用插槽 父组件中: <div id="app&q ...

  8. Java多线程编程(同步、死锁、生产消费者问题)

    Java多线程编程(同步.死锁.生产消费): 关于线程同步以及死锁问题: 线程同步概念:是指若干个线程对象并行进行资源的访问时实现的资源处理保护操作: 线程死锁概念:是指两个线程都在等待对方先完成,造 ...

  9. Springboot项目中使用@RestControllerAdvice注解不生效排查思路

    说明: 在后端编写业务逻辑时,可能会遇到异常抛出处理的情况,后端通常会通过throw出一个异常,然后通过@RestControllerAdvice注解标注自定义类进行统一处理,前端再将接收到的结果解析 ...

  10. Day16_91_通过反射机制获取父类和父接口

    通过反射机制获取父类和父接口 * 代码: import java.net.InterfaceAddress; public class ReflectTest14 { public static vo ...