2020-03-10 manu /Front-end/HTML/1.基础.html 99+ 10 分钟 1.5 k0次访问

基础

参考尚硅谷李立波老师的h5和c3课程，MDN官方和w3school

网页三要素

结构

HTML用于描述页面的结构

表现

CSS用于控制页面中元素的样式

行为

JavaScript用于响应用户的操作

HTML

Hype Text Markup Language超文本标记语言，可以包括音乐，图片等
是网页中的结构
使用标签的形式来标识网页的不用组成部分

标准结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>标题，会影响网页在搜索引擎中的排名</title>
	</head>
	<body>
        	<!-- 网页内容-->
        	<h1>我的网页</h1>
	</body>
</html>

[new]简单布局

h5的新标签

<body>
  	  <!-- 网页头部 -->
	    <header></header>
	    <!-- 网页主体 -->
	    <main> 
  	      <!-- 导航信息 -->
  		      <nav></nav>
		        <!-- 中间内容 -->
      		  <article></article>
   			     <!-- 右边信息 -->
            	<aside></aside>
    	</main>
 		   <!-- 网页底部 -->
	    <footer> </footer>
</body>

语法规范

1.html不区分大小写

2.注释不可以嵌套使用

3.结构必须完整，标签名要么成对使用，要么自结束

4.标签名可以嵌套使用，但不能交叉嵌套

5.属性必须有值，且值要有引号，单双都可以

文档声明

用来告诉浏览器我们使用H5的标准，防止怪异解析

<!doctype html>

标签与属性

成对标签，在开始标签里可以放属性(名值对)

<h1> </h1>

自结束标签

<meta />

基本标签

meta标签用来设置网页的一些元数据，比如字符集，关键字，简介等
h1标签比较重要，对于搜索引擎，h1仅次于title，只能写一个
p标签代表一个段落
br标签代表换行
hr代表水平线
pre预格式标签，在里面的文字是什么格式就显示什么格式
font标签可以吧文字包起来设置一些属性，比如字体face，颜色color，大小size(1-7)
center用来居中

文本标签

<em></em><!-- 语义为表示语气上的强调，斜体emphasize -->

<i></i><!-- 单纯斜体italic -->

<strong></strong><!-- 语义为强调内容，粗体 -->

<b></b><!-- 单纯粗体bold -->

<small></small><!-- 比父元素的字体小一些，有语义 ，表示细则，比如版权-->

<cite></cite><!-- 表示参考内容，书名歌名 -->

<q></q><!-- 表示短的应用，如一句名言，浏览器会加引号 -->

<blockquote></blockquote><!-- 表示块级引用（独占一行） -->

<sup></sup><!-- 上标 -->

<sub></sub><!-- 下标 -->

<del></del><!-- delete表示删除的内容，添加删除线 -->

<ins></ins><!-- insert表示插入的内容，加下划线 -->

<code></code><!-- 表示代码，不保留格式 -->

<pre></pre><!-- 是一个预格式标签，保存格式显示 -->

<!-- 结合code和pre表示代码 -->

实体

其实就是转义，将一些特殊字符显示出来就叫实体

如：

<less than 用<表示

>greater than 用>表示

空格用 表示（不换行）

插入图片

<img src="这是图片路径" alt="这是图片描述" />

属性
- width：单位px
- height：单位px
- 只设置一个时会按照比例变化
- 一般在自适应页面才需要
图片格式
- JEPG:支持的颜色多，可压缩，不支持透明，用来保存颜色丰富照片
- GIF:颜色少，可支持简单透明，支持动态图
- PNG:颜色多，支持复杂透明
使用原则：效果不一致，用效果好的；效果一致用小的

100%表示继承父元素

内联框架

可以在一个网页中显示另一个网页，但另一个网页内容不会被搜索引擎检索

1	<iframe> </iframe>

属性
- src：指向某个路径，可以是外部，可以是相对
- width
- height
- name：指定一个name属性

超链接

1	<a href="#" target="打开的位置"> 超链接名字</a>

创建超链接时，如果地址不确定可使用#作为占位符，点击会回到顶部

可在任意标签设置id属性，利用href=”某id”，可直接跳转到指定位置

属性target
_self：在本页面打开
_blank：新建页面
属性href(hypetext reference)
- 超文本引用，定义web资源位置
在内联框架中可设置一个name属性，利用
target=”name”，可以使超链接在内联框架中打开
每个元素都可以设置一个id，id在同一个页面不能重复
href="mailto:邮件地址"会打开计算机的邮件客户端

内联元素和块元素

<div>
    <!-- 块元素-->
</div>
	<!--内联元素-->
<span></span>

div独占一行，不管内容多少，一般用来布局
- p，h1，h2
fspan用来选中文字
- a，img，iframe
一般用块去包含内联元素
a不可以包含自身
p不可以放块元素

列表

无序列表

<ul>
	<li>hello</li>
	<li>world</li>
</ul>

ul(unordered lists)表示无序列表，用li列项

通过type表示项目符号

disc

square

circle
一般不用默认项目符号

1
2
3

ul{
list-style:none;
}

删除默认项目符号

ul和li都是块元素

有序列表

<ol>
	<li>hello</li>
	<li>world</li>
</ol>

有序列表ol(ordered lists)，用li列项，有顺序

type属性默认值

1默认值，数字

a/A使用字母

i/I罗马数字
ol也是块元素

定义列表

<dl>
	<dt>HTML</dt>
	<dd>网页标记语言</dd>
</dl>

dl(definition lists)

有两个子标签

dt被定义内容

dd定义内容
都是块元素

列表可以嵌套使用

各种缩写全称

ul是unordered lists的缩写 (无序列表)
li是list item的缩写（列表项目）
ol是ordered lists的缩写（有序列表）
dl是definition lists的英文缩写 (自定义列表)
dt是definition term的缩写 (自定义列表组)
dd是definition description的缩写（自定义列表描述）
nl是navigation lists的英文缩写（导航列表）
tr是table row的缩写（表格中的一行）
th是table header cell的缩写（表格中的表头）
td是table data cell的缩写（表格中的一个单元格）
cell (巢)[翻译的好怪.]
cellpadding （巢补白）
cellspacing （巢空间）

基础

http://yangchaohe.github.io/Front-end/HTML/1.基础.html

作者

manu

发布于

2020-03-10

更新于

2023-01-06

基础