0
点赞
收藏
分享

微信扫一扫

第一次网页前端培训笔记

寒羽鹿 2022-02-03 阅读 57
前端

1、安装编译器

HBuilderX下载

2、HTML概述

HTML(超文本标记语言)为纯网页结构,可以包含图片、视频、音乐,用HBuilderX编译

CSS美化网页

JS操作网页

3、基础语法

3.1 标签(4类)

  • 单标签                 <br/>
  • 有属性的单标签   <hr width="800" />
  • 双标签                 (由<起始标记>内容</结束标记>构成)
  • 有属性的双标签

3.2 整体结构

  • html   网页
  • head  标题
  • title    网页名字
  • body  内容
  • link     引入css文件
  • script  引入js文件

4、常用标签

4.1 标题、段落、换行和水平线

标题标签     h1~h6  依次递减  少用h1

  • <h1>标题1</h1>
  • <h2>标题2</h2>
  • <h3>标题3</h3>

段落标签     p标签  会自动换行  块级元素

  • <p>这是一个段落1</p>
  • <p>这是一个段落2</p>
  • <p>这是一个段落3</p>

换行标签     br标签 <br>  <br />

水平线标签     hr 单标签  常用属性(颜色 color   粗细 size   长度 width)

4.2 列表

有序列表     <ol><li></ li></ ol>

 

无序列表     <ul><li></ li></ ul>

 

4.3 div和span

div标签    (通常与css配合使用,用于布局)块级元素  默认占全部宽度 有多少内容高度占多少

                  设置宽度(width)高度(height)  通过align设置内容的对齐方式 

 

 

 span标签     行列元素(不会自动换行) 

 

4.4 格式化标签

font标签     字体风格 face   字体尺寸 size   字体颜色 color

pre标签      预格式化标签   保留空格和换行符,呈现等宽字体

     

 

文本标签     b加粗、strong加粗、i 斜体、u下划线、del中划线、sub下标、sup上标

 

  

4.5 a标签

超链接标签,用于链接到一个新的URL

  • href属性     需要跳转的地址(必须属性)
  • target属性      _blank:空白窗口       _self:当前窗口(默认值)

 

作为锚点

  • a标签的name属性值  <a  name="top"></a>
  • 其他的id属性值          <div  id="top"></div>
  • 锚点的使用                <a  href="#top"></a>

 

 

4.6 图片

img标签,单标签,向网页中嵌入一张图标

  • src   需要引入的图片的地址(必须属性)
  • alt    当图片破损或不存在时,显示文本的内容
  • title  当鼠标悬停在图片上时,显示的文本
  • width 图片的宽度
  • height 图片的高度
  • border 图片的边框

4.7 表格

表格标签       

  • table   表格   
  • tr         行   
  • td        标准单元格   
  • th        表头(字体居中、加粗效果)

table的属性

  • width   表格宽度
  • border  边框
  • align    对齐
  • style="border-collapse: collapse;"    合并边框

 tr的属性

  • align    行的内容的对齐

 

 

举报

相关推荐

0 条评论