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

 html和css的较量

 

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="李敬轩.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表象上都是加粗,从优化程度上,emstrong(语义化更强烈一些)要比ib更重要

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>
上一篇:面向轨交信息化,领存FT2000-4 COME核心板出击!


下一篇:2021-2022学年英语周报九年级第15期答案及试题