html的基本属性

男娘i 2022-12-25 13:52 111阅读 0赞

### html发展过程 ###

*  **W3C( World Wide Web Consortium )万维网联盟制定了结构(xhtml、xml)和表现(css)的标准，非赢利性的**
 *  **ECMA(European Computer Manufactures Association) 欧洲电脑场商联合会。制定了行为(DOM(文档对象模型)，ECMAScript)标准**

一个网页完成需要创建的文件夹及其规则

创建网页所需各个文件夹 css、js、img、html、font

### 文件的命名规则： ###

A/ 件命名规则：用英文，不用中文

B/ 名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；必须以英文字母开头。@\#￥%……！ -\_

C/ 网站的首页必须命名为index.html不建议使用shouye.html

**web标准？**

**结构（html）+表现（css）+行为（js）**

### html发展过程 ###

*  html（hyper text markup language 超文本标记语言）
 *  html5
 *  xhtml(更为复杂，区分大小写)
 *  h5目前处于发展期，运用于移动端

### html基本格式 ###

<!doctype html> ----声明文本类型是html
    
    <html> ----一个网页由一个大块html包起来
    
    <head>
    
    <meta charset="utf-8"/> ----单标签，设置字符编码，utf-8为国际通用语言，gb2312中文码
    
    <title>百度一下，你就知道</title> ----标题标签
    
    </head> ----分为头部（网页标题）
    
    <body></body> ----分为身体（网页页面） 以上两者平级关系
    
    </html>

**快捷键**

*  ！+tab键 基本框架所有都出来
 *  只打head+tab 出来<head></head>
 *  注释：光标放到最后然后ctrl+/
 *  一直按ctrl后鼠标会向下移动
 *  w20+tab为width:20px;
 *  bg+tab为background:\#000;
 *  bg++tab 出 background: \#fff url() 0 0 no-repeat;

HTML的基本语法单标签（空标记） 双标签（常规标记)

<常规标记>

<标记 属性=“属性值” 属性=“属性值”></标记>

例如：<head></head>

空标记

<标记 属性=“属性值” />

例如：<meta charset=”utf-8”> <br/>

说明：

1.写在<>中的第一个单词叫做标记，标签，元素。

2.标记和属性用空格隔开，属性和属性值用等号连接，属性值必须放在“”号内。

3.一个标记可以没有属性也可以有多个属性，属性和属性之间不分先后顺序。

4.空标记没有结束标签，用“/”代替。(在HTML5中，结束标签不需要用/，因为HTML5注重的是语言的简洁)

### 常用标签 ###

*  div无意义的标签，任何东西都可以写进去，一般用于大盒子，本身具有换行的作用，对搜索引擎无影响。
 *  标题标签

在一个网站中，h1只能使用一次，所以一个网站的logo都用h1来描述， h2最多使用3次，h3,h4,h5,h6可随意用，但网页描述时最好注意层次分明，h1-h3对搜索引擎友好

*  段落标签

<p></p> 具有换行功能

*  换行标签<br>
 *  分割线<hr>
 *  有序列表

<ol>
    
    <li>第一行</li>
    
    <li>第二行</li>
    
    <li>第三行</li>
    
    </ol>
    
    type:规定列表中的列表项目的项目符号的类型
    
    语法：<ol type="a"></ol>
    
    start 属性规定有序列表的开始点。
    
    语法：<ol start="5"></ol>

*  无序列表

<ul>
    
    <li>第一行</li>
    
    <li>第二行</li>
    
    <li>第三行</li>
    
    </ul>
    
    type:规定列表的属性的符号样式有disc(实心圆)/circle(空心圆)/square(实心方块)

*  <html lang="zh-cn"> 中文 <html lang="en"> 翻译

### 图片标签 ###

*  <img src="E:\\千锋\\html小试\\css实战2\\images\\t5.jpg" alt=""> 绝对路径
 *  相对路径：../返回上一级

/去下一级

通过当前文件找到目标文件

相对路径不可以跨盘

*  <img src="lu" alt="拼命加载中" title="hahaha">

alt 图片加载失败时显示的文字，title鼠标悬停时显示的提示文字

### 小标签 ###

*  <span>干净的小标签</span>
 *  <u>下划线</u>
 *   <del>删除线</del>
 *  <b>加粗</b> ， <strong>强调加粗</strong>
 *  <i>斜体</i> ， <em>强调斜体</em>
 *  <sub>+</sub>下标 <sup>-</sup>上标
 *  <a href="http://www.baidu.com">去百度</a> 超链接，可以跳转到网页，图片等等

属性：target="\_blank" 在空白页打开 target="\_self"在本身页面打开

title=" 哈哈哈 " 鼠标悬停时显示的提示文字

*  空格&nbsp;所占位置没有一个确定值，由当前字体字号决定

### 表格 ###

table表格 tr行 td列 border 边框 width 宽 height 高 cellspacing="0" 边框与边框距为0，即两个盒子之间的距离 cellpadding="0" 内容与边框之间的距离 bordercolor="" 边框颜色 align="center"居中 colspan 合并列 rowspan 合并行 caption表头

align="center"居中 在table中，整个表格在网页中居中，在tr,td中，内容居中

表格为空时要在里面添加空格 &nbsp；

table>tr\*12>td\*8 12行8列表格的简要写法

详解：

1）width="表格的宽度"

2）height="表格的高度"

3）border="表格的边框"

4）bgcolor="表格的背景色" bg=background

5）bordercolor="表格的边框颜色"

6）cellspacing="单元格与单元格之间的间距"

7）cellpadding="单元格与内容之间的空隙"

8）对齐方式：align="left/center/right";