HTML语法

1.前端开发涉及到的三个语言

  • HTML:内容层——负责页面的内容
  • CSS:样式层——负责页面的样式
  • JaveScript:交互层——负责页面的行为/交互

2.定义

HTML超文本标记语言 Hyper Text Markup Language

超文本:文本 图片 链接 视频 音频 ....

标记:html的语法<标签名>

3.HTML的特点

.html或.htm为后缀的文件

页面中还可以嵌套JS脚本

4.HTML语法规则

1.HTML语法基础

标签:

<标签名>

标签的分类:

1)双标记标签,封闭类型标签

<开始标签>内容区域</结束标签>  <html></html>

2)单标签标签,非封闭类型标签

<标签名/>现在H5语法规定可以不加斜杠<标签名> <br/>  <br>

2.HTML网页结构

<!DOCTYPE>用于告诉浏览器当前的html使用h的语法编写,请用h5的规范解析

  • DOC --Document 文档
  • Type--类型
  • head--头部
  • body--身体、主体
  • title--标题

注释:

快捷键:ctrl+/ 

格式    <!--    -->

3.标签样式

 转义符号  

小于号 &lt;

大于号 &gt; 

<tom> -- &lt; tom&gt;  

4.段落标签

P:自己单独成行,上下方向有垂直的行间距

lorem是用于生成假文的,先输入Lorem出现提示回车或者Tab补全即可

5.标题字标签

h:加粗,有行间距

6.分割线标签(单标签)

<hr>

<hr>分割线后面的内容

5. 分区元素 15:44(双)

1)块分区 div标签

专用于页面标签,独占一行,没有样式

  • 是最简单的块级元素,也是最为基本的分区标签
  • 最重要的功能:作为标签的外包裹,以分块的形式将页面区分
  • 可以包裹body中的任何标签,也可以独立使用

2)行分区 span

span 称为行内标签,用于包裹在一行中需要单独特殊处理的文本内容

  • 不换行,最简单的行内元素,没有特殊样式

6.图片与超链接

1)图片

常见的图片格式

  • jpg/jpeg  普通图片
  • png  透明图
  • gif  动图
  • webp(谷歌推出,清晰度高且体积小,有版权)

2)标签的属性

属性:也称为特征,描述当前标签某一方面的特点

写法:<开始标签 属性名1 =“属性值 1”属性名2 =“属性值 2”></结束标签>

  • 属性声明必须写在开始标签内
  • 属性名和属性值用等号连接
  • 属性值要写在双引号中间

3)<img> 单标记标签

属性:

  • src=“图片资源的路径/url”
  • width=“图片的宽度  单位(%或px)”
  • height=“图片的高度  单位(%或px)”
  • alt=“资源加载失败时显示替换的文字”

URL 统一资源定位符

  • 绝对路径—可以用网页文件
  • 相对路径

./表示当前目录  。。/表示上一级目录

<img src="img/img/"zichan1.jpg>

4)超链接(双标签)

<a> </a>

属性:

  • href=“路径”      ## 锚点  加上#号+id
  • target=" "

        _self  默认值,在本页面中打开新连接

        _blank  在新的选项卡页面中打开链接

<a href="p3.htmkl">链接页面</a>

<a href="p3.htmkl"  target="_self">链接页面</a>

<a href="p3.htmkl"  target="_blank">链接页面</a>

锚点

1.加上id

<a href="#C2">快速跳转</a>

 <h3 id="C1">第一章节</h3>

 <h3 id="C2">第二章节</h3>

 <h3 id="C3">第三章节</h3>

2.快速跳转到页面顶部  <a href="#">快速跳转顶部</a>

 <a href="#C2">快速跳转</a>

<h3 id="C1">第一章节

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque rem sit mollitia veniam error velit laborum, sequi fugiat ipsum voluptates distinctio nam eveniet! Dolor qui blanditiis dolorum commodi quisquam distinctio.</h3>

<h3 id="C2">第二章节</h3>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus porro vero rem nihil pariatur dolor quod possimus placeat sint accusantium ipsum quia deserunt, vel nesciunt neque rerum, odit quae voluptas.

<h3 id="C3">第三章节</h3>

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Omnis numquam architecto ab hic esse molestias corrupti odio libero assumenda sapiente quos porro voluptatum debitis optio tempore, reprehenderit repudiandae accusantium! Ut.

==============

 <a href="#">快速跳转顶部</a>

超链接去掉下划线:text-decoration:none

用于CSS中

  • 17
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值