Day01学习----HTML
1、HTML 介绍
是一种（超文本标记语言）其中超文本包括（图片、视频、音频、超链接....）
网络页面的组成：HTML（结构）+CSS样式+JS（行为）可以理解为 HTML是基础框架，在上面运用CSS进行美化页面，JS可以理解为可以进行的一系列操作。
2、结构标签
在html中有两种做标签的方式：（1）<!--xxxxx--> （2）/* xxxxx */
<!DOCTYPE html> 这代表版本
<html lang="en">
<head> head表示网页头信息
<meta charset="UTF-8"> meta表示网页的元信息，charset="UTF-8"表示网页的编码格式
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> 这中间夹着的是网页的标题
</head>
<body> body中间表示网络正文
</body>
</html>
颜色表达方式
共有两种，第一种是英文单词如（pink）第二种用16进制表示颜色如（#000000）
3、文字内容
（1）段落标签：“p标签” <p>文本文字<p>
（2）水平线标签：单标签
（3）文字标签：font 标签处理网页中文字的显示方式
（4）文本标签：使用标签实现标签的样式处理
（5）图片标签：在指定页面处引入一幅图片
（6）链接标签：在页面中使用链接标签跳转到另一页面
（7）列表标签：有序（使用一组有序的符号定义）无序 （使用一组无序的符号定义）列表嵌套（无序与有序列表互相嵌套使用）
（8）容器标签：块级标签、行内标签、行内块标签
段落标签：表达方式：<p>文本内容<p>
特点：行与行之间有空行
属性：align表示对齐方式（left、center、right）
水平线标签：表达方式：<hr> 单标签
属性：（1）width：水平线长度，有两种表达方式1、像素（px）2、百分比（%）
（2）size：水平线粗细（像素表示 ：30px）
（3）color：水平线颜色
（4）align：水平线的对齐方式
文字标签：font标签处理网页中文字的显示方式
<font size="" color=" " face=" ">添加文字</font>
size: 用来设置字体大小，最大7号，最小1号 <font size="6"></font>
color: 用来设置字体的颜色 <font color=" pink"></font>
face：用于设置字体的样式 <font face="楷体"></font>
文本标签：使用标签实现标签的样式处理
标签 代码 表示
i <i></i> 斜体
b <b></b> 标签粗体
u <u></u> 下划线
em <em></em> 强调字体
strong <strong></strong> 加粗（常用）
del <del></del> 删除线
sub <sub></sub> 下标标签
sup <sup></sup> 上标标签
图片标签：代码格式<img src="引入路径">
属性名 描述
src 引入图片的地址
width 图片的宽度
height 图片的高度
border 图片的边框
align 与图片对齐显示方式
alt 提示信息
title 将鼠标移动到图片上显示文字信息
链接标签：代码格式 <a href=" "></a> 属性：href：跳转页面的地址（要是跳转到外网需要加协议----计算机网络会学）
设置跳转页面时页面打开方式 target属性 1、_blank 在新窗口中打开。2、_self 在原窗口打开 默认值 。
指向同一页面中的指定位置 定义位置：<a name="名称"></a> 指向：<a href="名称"></a>
列表标签： 无序列表标签 <ul></ul> 写法如下 type是一种类型
<ul type="circle">
<li> </li>
</ul>
属性值 描述 用法举例
circle 空心圆 <ul type="circle"></ul>
disc 实心圆 <ul type="disc"></ul>
square 黑色方块 <ul type="square"></ul>
有序列表标签<ol></ol> 写法如下 type是一种类型
<ol type="a" start="1">
<li> </li>
</ol>
属性值 描述 用法举例
A 大写字母类型 <ol type="A"></ol>
a 小写字母类型 <ol type="a"></ol>
i 小写古罗马 <ol type="i"></ol>
I 大写古罗马 <ol type="I"></ol>
1 数字类型 <ol type="1"></ol>
列表嵌套：举个栗子：<ol>
<li></li>
<li></li>
<li>
<ul>
<li></li>
</ul>
</li>
</ol>
容器标签：分为三种（1）块级标签（2）行内标签（3）行内块标签 三者区别
1、块级标签 （1）独占一行（2）可设置宽高 其标签是div 代码<div></div>
2、行内标签 （1）宽高取决于内容宽高 （2）不可设置宽高
3、行内块标签（1）宽高取决于内容宽高 （2）可以设置宽高 其标签是span 代码<span></span>
特殊符号：（1）空格： ；算是比较重要的
扫一扫
355
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
