初步认识HTML+CSS

最新推荐文章于 2024-07-17 18:42:40 发布

Lamport0

最新推荐文章于 2024-07-17 18:42:40 发布

阅读量227

点赞数

文章标签： html css javascript web

本文链接：https://blog.csdn.net/Lamport0/article/details/104470430

版权

网页的组成

在这里插入图片描述

WEB标准

Web标准不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合。

在这里插入图片描述

  （1）W3C( World Wide Web Consortium )万维网联盟，于1994年10月麻省理工学院计算机科学实验室成立，
  W3C组织是对网络标准制定的一个非赢利组织，制定了结构标准和样式标准；
 （2）ECMA：欧洲电脑网商联合会（厂商协会），制定了行为标准；

HTML

HTML 指的是超文本标记语言 (Hyper Text Markup Language) www万维网的描述性语言。

XHTML指可扩展超文本标记语言（标识语言）（EXtensible HyperText Markup Language）是一种置标语言，
表现方式与超文本标记语言（HTML）类似，不过语法上更加严格。

HTML5指的是HTML的第五次重大修改（第5个版本）

HTML发展

在这里插入图片描述

编辑器

在这里插入图片描述

建立站点

规划网站的所有内容和代码
整合资源

文件命名规范

小写英文字母、数字、下划线的组合
其中不得包含汉字、空格和特殊字符
必须以英文字母开头

HTML基础

1、HTML架构

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

有三种：  
	Strict（严格型)、 
	Trasitional（过渡型）、
	Frameset（框架型）

2、HTML5基本机构

在这里插入图片描述

3、HTML语言

HTML语言组成

（1）标签

	txt 写在尖角号<>里的第一个单词，叫做标记，也叫做标签，也称作元素；

（2）属性

	标记和属性用空格隔开，属性和属性值用等号连接，属性值必须放在双引号内
	一个标记可以有多个属性，属性和属性之间用空格隔开，属性不分先后顺序

HTML语法
（1）常规标记(双标记)： <标记名称属性1名=“属性1值” 属性2名=“属性2值” ………… >
（2）空标记（单标记）：<标记名属性1名=“属性1值” ………… />

HTML常用标签

1、文本标题标签

文本标题标签共6个（h1~~h6）

<h1>一级标题</h1><!-- （一般放网站logo） -->
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

2、文本倾斜 & 加粗

文本倾斜

<i></i>
<em></em>

文本加粗

<b></b>
<strong></strong>

3、下划线

<u></u>

4、换行 & 水平线

换行：

<br />

水平线：

<hr />

5、上角标 & 下角标

上角标：

<sup></sup>

下角标：

<sub></sub>

6、段落标签

<p></p>

7、文本节点

<span></span>

8、常用转义字符

空格：

&nbsp;

右尖角号（ > ）：

&gt;

左尖角号（ < ）：

&lt;

版权：

&copy;

9、列表

（1）无序列表

<ul>
	<li>列表项内容1</li>
	<li>列表项内容2</li>
	<li>列表项内容3</li>
</ul>

（2）有序列表

<ol>
	<li>列表项内容1</li>
	<li>列表项内容2</li>
	<li>列表项内容3</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>

10、超链接

<a></a>

属性：
	href="路径"
	target="_blank / _self"
	title="文本提示"

11、图片

<img />

属性：
	src="路径"
	title="文本提示"
	alt="替代文本"
	width="宽度"
	height="高度"
	border="边框"

title和alt区别
	alt:
        1、alt属性是当图片不显示的时候，图片的替换文字。
        2、alt属性值得长度必须少于100个英文字符
        3、alt属性是img标签的必须属性，如果是没有特别意义的图片，可以写alt=""
        4、alt属性是搜索引擎判断图片与文字是否相关的重要依据，alt属性添加到img主要的目的是
        为了SEO优化
	title:
        1、title属性并不是必须的。
        2、title属性是当鼠标放到文字或是图片上时显示的提示信息
        3、title属性更多倾向于用户体验。

12、相对路径

（1）同级
	当当前文件与目标文件在同一目录下，直接书写目标文件的文件名+扩展名；
（2）上级找下级
	当当前文件与目标文件所处的文件夹在同一目录下，写法如下：
	文件夹名/目标文件全称+扩展名；
（3）下级找上级
	当当前文件所处的文件夹和目标文件在同一目录下，写法如下：
	../目标文件文件名+扩展名；

13、DIV

<div></div>

14、HTML注释

<!-- 注释内容 -->

15、表格标签

在这里插入图片描述
（1）表格基本结构

<!-- 
    table 为表格
    tr 行
    td 单元格
-->
<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

（2）表格的HTML属性

1）width="表格的宽度"
2）height="表格的高度"
3）border="表格的边框"
4）bordercolor="边框的颜色"
5）bgcolor="表格背景色"
6）cellspacing="单元格与单元格之间的间距"
7）cellpadding="单元格边框与内容之间的间距"
8）align="表格水平对齐方式"
	取值：left、right、center、
9）valign="表格垂直对齐方式" 
	取值：top\bottom\middle
10）合并单元格属性：（只能加给td标签）
	合并列： colspan="所要合并的单元格的列数"
	合并行： rowspan="所要合并单元格的行数"

（3）数据行分组

<thead>表头</thead>
<tbody>标题</tbody>
<tfoot>表尾</tfoot>

（4）数据列分组

<!--span属性为把几列分为一组-->
<colgroup span="value"></colgroup>

（5）列标题

<th></th>

（6）表格标题

<caption></caption>

（7）表格css属性
1）单元格间距(该属性必须给table添加) 表示单元格边框之间的距离，不可取负值

border-spacing:value;

2）合并相邻单元格边框 (该属性必须给table添加) separate(边框分开)默认值； collapse(边框合并)

border-collapse:separate/collapse;

3）定义当单元格无内容时，是否显示该单元格的边框区域；show：显示；hide：隐藏；

empty-cells:show/hide;

Lamport0

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初步认识HTML+CSS

网页的组成WEB标准Web标准不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合。（1）W3C( World Wide Web Consortium )万维网联盟，于1994年10月麻省理工学院计算机科学实验室成立， W3C组织是对网络标准制定的一个非赢利组织，制定了结构标准和样式标准；（2）ECMA：欧洲电脑网商联合会（厂商协会），制定了行为标准；HT...
复制链接

扫一扫