ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2021-05-06 13:33:35  阅读:185  来源: 互联网

标签:标签 标题 小白 html baby come 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>

标签:标签,标题,小白,html,baby,come,css,属性
来源: https://www.cnblogs.com/guoyuxuan/p/14734694.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有