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. 记客户端WebBrowser控件修改版本的问题

    保留在本地电脑的一篇记录,第二条描述是在网上看来的,忘记在哪看的了,也就没注明出处,望见谅. 1.Winform内置浏览器控件的底层调用与系统IE浏览器的底层调用相同. 2.IE8 对渲染引擎做了很大 ...

  2. 如何下载Image Properties Context Menu（图片）插件

    如何下载Image Properties Context Menu(图片)插件 可以通过:http://www.cnplugins.com/zhuanti/four-image-processing. ...

  3. addEventListener的第三个参数详解

    示例代码 element.addEventListener("mousedown", func, { passive: true });  element.addEventList ...

  4. Memory Networks02 记忆网络经典论文

    目录 1 Recurrent Entity Network Introduction 模型构建 Input Encoder Dynamic Memory Output Model 总结 2 hiera ...

  5. Python模拟简易版淘宝客服机器人

    对于用Python制作一个简易版的淘宝客服机器人,大概思路是:首先从数据库中用sql语句获取相关数据信息并将其封装成函数,然后定义机器问答的主体函数,对于问题的识别可以利用正则表达式来进行分析,结合现 ...

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

    [源码解析] 并行分布式框架 Celery 之架构 (2) 目录 [源码解析] 并行分布式框架 Celery 之架构 (2) 0x00 摘要 0x01 上文回顾 0x02 worker的思考 2.1 ...

  7. 网络对抗技术Exp2-后门原理与实践

    后门概念 后门就是不经过正常认证流程而访问系统的通道. 哪里有后门呢? 编译器留后门 操作系统留后门 最常见的当然还是应用程序中留后门 还有就是潜伏于操作系统中或伪装为特定应用的专用后门程序. 下面是 ...

  8. python基础之基本数据类型与基本运算符

    一.基本数据类型 1.整数类型 作用:描述年龄.等级,电话号码等数据类型 age = 18 phone_number = 13572839204 2.浮点型 作用:描述薪资.身高等带小数的类型 hei ...

  9. Spring Cloud 升级之路 - 2020.0.x - 3. Undertow 的 accesslog 配置

    上一节我们讲述了如何使用 Undertow 作为我们的 Web 服务容器,本小节我们来分析使用 Undertow 的另一个问题,也就是如何配置 accesslog,以及 accesslog 的各种占位 ...

  10. js 日期加减

    加: console.log(moment().format("YYYY-MM-DD HH:mm:ss")); //当前时间 console.log(moment().add(10 ...