3.17日html课程

一．HTML基础
Head是描述区
Body是内容区，只要是网页中能看到的内容都放body里面
< !DOCTYPE html>声明文档类型
< html lang=”en”>根标签lang="en"语言形态
< meta charset=“UTF-8”>
< meta name=“viewport” content=“width=ul, initial-scale=1.0”>控制视口比例
< title>Document< /title>当前网页的标题，显示在状态栏
shift+alt+a注释

二．HTML标签
Htlm标签分为单标记（空标记）和双标记（常规标记）
双标记<标签名称 属性名=“属性值”> </标签名称>
单标记<标签名称 属性名=“属性值”/>
三．Htlm语法说明
1.写在<>中的第一个单词是标签的名称。
2.标记和属性用空格隔开，属性和属性值用等号连接，属性值必须放在引号内（单双引号都行）。
3.一个标记可以没有属性也可以有多个属性，属性与属性之间用空格隔开，属性和属性之间不分先后顺序。
4.空标记没有结束标签，用“/”代替。
四．常用标签：
1，标题标签
< h1>< /h1>唯一性：在一个页面内只能出现一次，用来放logo
< h2>< /h2>
< h3>< /h3>
< h4>< /h4>
< h5>< /h5>
< h6>< /h6>
特点：拥有自己的默认的大小，文本也是加粗状态
H2-h6可以是网页板块的标题，也可以是一段内容的标题，没有唯一性
2，加粗标记
< b>< /b>
< strong>< /strong>
特点：默认显示加粗状态，strong更强调语气
3，文本倾斜
< i>< /i>
< em>< /em> em有强调语气
又加粗又倾斜可以用嵌套< i>< b>你好< /b>< /i>
4，下划线
< u >< /u>
5,强制换行
< br>
特点:浏览器只要遇到br，就会把后面的内容放到下一行显示
6，水平线
< hr>
7， 段落标记
< p>< /p>
8，字符 （ 小段文本 ）
< span>< /span>
9，常用转义字符
& nbsp; 不换行空格
& gt; >右尖括号
& lt; <左尖括号
© 备案中图标版权 ©
10，上标&下标
< sup>< /sup>
< sub>< /sub>
11，div
Div是个盒子
Div的用法：划分网页结构，没有具体含义，统称为块标签

五．列表

1，无序列表
< ul>
< li >列表项内容< /li>
< li >列表项内容< /li>
< li>列表项内容< /li>
…
< /ul>
2，有序列表
< ol>
< li>列表项内容< /li>
< li>列表项内容< /li>
< li>列表项内容< /li>
…
< /ol>
type:规定列表中的列表项目的项目符号的类型
语法：< ol type=“ a">< /ol>
1 数字顺序的有序列表（默认值）（1, 2, 3, 4）。
a 字母顺序的有序列表，小写（a, b, c, d）。
A 字母顺序的有序列表，大写（A,B,C,D)
i 罗马数字，小写（i, ii, iii, iv）。
I 罗马数字，大写（i, ii, iii, iv）。
start 属性规定有序列表的开始点。(start的属性值必须是数字)
语法：< ol start=“5”>< /ol>
3,自定义列表
< dl>
< dt>< /dt>
< dd>< /dd>
< /dl>

六．超链接
< a>< /a>
属性： href =”跳转的地址”
target = " "
_black在新窗口打开
_self在当前窗口打开
title = “文本提示”
拓展： rel = ‘nofollow’;

七．图片
< img>
属性：Src=”图片的路径”
Alt=”文本替换图片
Alt当图片加载不出来时，alt里面的文本替换图片
有利于seo优化，方便搜寻引擎对图片进行检索
Title为提示信息作为图片的小标题
八．相对路径
1，（同级找同级） 当当前文件与目标文件在同一目录下，直接书写目标文件的文件名+扩展名； < ./当前路径 >
2（父级找子级） 当当前文件与目标文件所处的文件夹在同一目录下，写法如下： 文件夹名/目标文件全称+扩展名； （下级找上级） ./images/图片
3（子级找父级）当当前文件所处的文件夹和目标文件在同一目目录下，写法如下…/目标文件文件名+扩展名；…/ 表示返回上一级（先从教室出去）
4（子级找子级）…/images/2.
相对路径：直接输入地址
九．表格
表格的作用：显示数据
表格的实现：
< table>
< tr>
< td>< /td>
< td>< /td>
< /tr>
< /table>
width=“表格的宽度”
height=“表格的高度”
border=“表格的边框”
代码



感觉今天的学习很充实，希望可以充分理解和掌握每一个标签
不知道为什么预览的博客有的代码显示不出来有的自动编译了

• 点赞
• 收藏
• 分享
• 文章举报