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. WBX24T2X CPEX国产化万兆交换板

      WBX24T2X是基于盛科CTC5160设计的国产化6U三层万兆CPEX交换板,提供24路千兆电口和2路万兆光口,采用龙芯 2K1000处理器.支持常规的L2/L3协议,支持Telnet.SNMP ...

  2. 医学图像配准 | Voxelmorph 微分同胚 | MICCAI2019

    文章转载:微信公众号「机器学习炼丹术」 作者:炼丹兄(已授权) 联系方式:微信cyx645016617(欢迎交流) 论文题目:'Unsupervised Learning for Fast Proba ...

  3. LNMP配置——Nginx配置 —— Nginx解析PHP

    一.配置 #vi /usr/local/nginx/conf/vhost/test.com.conf 写入: server { listen 80; server_name test.com test ...

  4. [ONTAK2010] Peaks 加强版

    [ONTAK2010] Peaks 加强版 题目大意:原题变为强制在线查询 Solution 读入山高,排序后依然建立树链,初始化并查集,初始化重构树新节点标号为\(n+1\) 读入边,按照边权从小到 ...

  5. 在linux系统中登录mysql时出现Enter password: ERROR 1045 (28000): Access denied for user 'debian-sys-maint'@'localhost' (using password: YES)的解决办法

    在一次使用mysql数据库是出现了这种错误,于是乎去百度看了很多博文踩了很多坑,最终解决了问题,分享给大家. 转载与:https://blog.csdn.net/css33/article/detai ...

  6. 高精地图技术专栏 | 基于空间连续性的异常3D点云修复技术

    1.背景 1.1 高精资料采集 高精采集车是集成了测绘激光.高性能惯导.高分辨率相机等传感器为一体的移动测绘系统.高德高精团队经过多年深耕打造的采集车,具有精度高.速度快.数据产生周期短.自动化程度高 ...

  7. 操作系统实验(一)-Shell编程

    操作系统实验:Shell编程 emmmmm,实验前老师发了一份实验说明,里面有教怎么配置虚拟机Ubuntu.这里就不做过多叙述,需要说明的是,kali和ubuntu都可以以shell运行这个C语言程序 ...

  8. Airtest简单上手讲解

    Airtest是网易开发的手机UI界面自动化测试工具,它原本的目的是通过所见即所得,截图点击等等功能,简化手机App图形界面测试代码编写工作. 安装和使用 由于本文的目的是介绍如何使用Airtest来 ...

  9. [Azure Devops] 获取单元测试的代码覆盖率

    1. 获取代码覆盖率 上一篇文章里,我们在 Pipeline 中插入一个单元测试并把所有单元测试都通过作为 Pipeline 通过的硬性要求.除此以外,我们还可以获取单元测试的代码覆盖率,用作衡量代码 ...

  10. [矩阵乘法] PKU3233 Matrix Power Series

    [ 矩 阵 乘 法 ] M a t r i x P o w e r S e r i e s [矩阵乘法]Matrix Power Series [矩阵乘法]MatrixPowerSeries Desc ...