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. 使用wireshark 抓取 http https tcp ip 协议进行学习

    使用wireshark 抓取 http https tcp ip 协议进行学习 前言 本节使用wireshark工具抓包学习tcp ip http 协议 1. tcp 1.1 tcp三次握手在wire ...

  2. 两种常见Content-type的方便理解

    application/x-www-form-urlencoded:key=value键值对application/json:{name:"张三"} JSON字符串塞到请求的bod ...

  3. 【java框架】SpringBoot(5)--SpringBoot整合分布式Dubbo+Zookeeper

    1.理论概述 1.1.分布式 分布式系统是若干独立计算机的集合,这些计算机对于用户来讲就像单个系统. 由多个系统集成成一个整体,提供多个功能,组合成一个板块,用户在使用上看起来是一个服务.(比如淘宝网 ...

  4. [源码解析] 并行分布式框架 Celery 之架构 (1)

    [源码解析] 并行分布式框架 Celery 之架构 (1) 目录 [源码解析] 并行分布式框架 Celery 之架构 (1) 0x00 摘要 0x01 Celery 简介 1.1 什么是 Celery ...

  5. Spring笔记（四）

    Spring JdbcTemplate 一.JdbcTemplate概念及使用 1. 什么是JdbcTemplate: Spring框架对JDBC进行封装,使用JdbcTemplate方便实现对数据库 ...

  6. 「HTML+CSS」--自定义加载动画【006】

    前言 Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 哈哈 自我介绍一下 昵称:海轰 标签:程序猿一只|C++选手|学生 简介:因C语言结识编程,随后转入计算机 ...

  7. 解决“用PicGo-2.3.0-beta5 + GitHub做博客图床，github仓库图片文件不显示”的问题记录（备忘）

    解决"用PicGo-2.3.0-beta5 + GitHub做博客图床,github仓库图片文件不显示"的问题记录(备忘) 历时几个小时百度,终于靠自己理解解决了GitHub仓库图 ...

  8. BUAA_OO_第二单元

    BUAA_OO_2020_UNIT2 一.程序结构分析 第五次作业 UML & Mertrics ​ 电梯的调度问题,实质上就是任务的请求与分配问题,笔者在第五次作业中采用简单的"生 ...

  9. JDK8中新日期时间API

    它们面临的问题是:可变性:像日期和时间这样的类应该是不可变的.偏移性:Date中的年份是从1900开始的,而月份都从0开始.格式化:格式化只对Date有用,Calendar则不行.此外,它们也不是线程 ...

  10. Java（114-132）【Scanner类、Random类、ArrayList类】

    1.API概述和使用步骤 应用程序编程接口.Java的API是一本程序员的字典,学会查询 2.Scanner 概述及其API文档 键盘输入 类都是大写的Scanner,关键字是小写的public 3. ...