Html 基础知识_square html-CSDN博客

本文链接：https://blog.csdn.net/nans07/article/details/13170181

Html是什么超文本标记语言

Html可以做什么

编写静态网页在网页中添加文字图形动画声音表格链接同时构成一个个漂亮的网页

html 发展历史介绍（了解）

W3c的介绍

Html和 xhtml的区别

html语言本身存在一些缺陷而用xml替代html又为时过早，所以出现了xhtml 实现两者之间的过渡

html文件结构标记和元素属性符号实体

Html运行原理

1）本地访问运行

2）远程访问运行

万维网简易示意图

Html的开发工具

记事本 dw frontpage VS....

Html的基本结构

Html的结构，在vs中新建一个编译html的文件，其在创建接口的时候包含一下内容
<html>
<head>
<title>设置页面的标题（不设置时显示无标题文档）</title>
</head>存放开始信息，对网页页面的描述不会直接显示在页面上
<body>
正文内容
</body>
</html>
以上内容所有的html页面都包含这些内容。需要写完全。

Html标记及其属性

<html>
<head>头
<font color="red">hello</font>
</head>
<body>存放内容
</body>
</html>

Html符号实体介绍

Body标签中有bgcolor属性，可以设定网页的颜色
<body color=”read”></body>
Html和xml的联系和区别
1、 html的属性值要用配对的符号标注起来
2、注释都用<！----内容----->来标注
3、 Html和xml中使用的特殊字符相同

一些常用符号实体

特殊字符
&lt 小于号
&gt 大于号
&nbps 空格

html常用标记元素

超链接 href图像元素 image 表格 table

<html>…</html> 用于标记HTML文档的开始和结束
<head>…</head> 用于写入标题和其他说明信息
<body>…</body> 网页的主体所在，用于写入文本、图像和链接。
<br/> 回车
<p/> 段落
<center>文本</center> 文本居中显示
H标签 html定义了<h1></h1>到<h6></h6>六个h标签来表示不同大小的字体
<b>a</b> 粗体
<font></font> 字体标签
<ahref =”链接地址” target=”_blank” title=”说明” >链接中文</a> （target设定链接打开方式，_blank表示在新窗口打开）站内引用使用相对URL:/表示网站根目录，../表示父目录，./表示当前目录。（此方法的好处是网站域名改变，不会影响）
<area>...</area> 标签用于标记区域
<table><tr><td></td></tr></table>标签用于创建表格（tr表示行，td表示单元格，表头的td可用th代替，表示粗体居中）cellpadding(table属性，单元格填充)cellspacing(table属性，单元格间距)rowspan(tr属性，跨行，值为要跨的行数) colspan(td属性，跨列，值为要跨的列数)
<imagesrc=”.jpg”></image> 链接图片
HTML中子标签默认继承父标签设定，如果自己单独设定，则会覆盖父标签的设定。

表格小练习——菜谱

<html>
<head>
<title>第一个网页</title>
</head>
<body>老鼠爱大米.................
<img src='油焖大虾.jpg' widh =900px border=3/>

</body>
</html>

表格小练习——课程表

html列表

无序列表 disc circle square

有序列表 start="A"？？？

Html列表 - 框架

<html>
<head>
<title>好汉榜</title>
<link href="my2.css" type="text/css" rel="stylesheet"/>
</head>
<body >
梁山英雄榜</br></br>
<a href="#"><span class="style1">老员外</span></a></br></br>
<a href="#"><span class="style2">宋江</span></a></br></br>
<a href="#"><span class="style3 ">吴用</span></a></br></br>
<a href="#"><span class="style2">豹子头</span></a></br></br>
<a href="#"><span class="style4">关公</span></a></br>
</br>
</body>
</html>

Noresize框体大小不可变 frameset frame

Cols 纵向 rows 横向

框架综合练习——音乐歌词

All2.html

left.html

Top.html

Right1.html

Right2.html

form（表单）元素各种input元素

form（表单）元素

用户在网页上进行注册等活动时，收集用户的信息，收集购买物品所需的信息等等。从而实现与用户的交互。每一个表单都有一个“提交”(submit)按钮，所填写的信息就发送WEB服务器，由服务器负责处理提交的信息。

Action提交到 reset 重置 submit 提交 hidden隐藏 checkbox 复选 radio单选

Input元素

select下拉列表 option下拉选项 textarea选择上传文件

Html常用表单元素

bgcolor 背景颜色（red,black，自选色等）
alt 图片无法显示时的文本
border 边框调整
Color 颜色（同上）
Size 大小、控件宽度（数字即可）
Width 宽度
Height 高度
Face 字体（宋体，黑体，楷体，等等）
target 目标（一般设定值为_blank，新窗口打开）
Align 水平对齐（left,right,center）
Valign 垂直对齐（top,bottom，middle）
Value 设定初始值
Maxlength 限制长度
Readonly 只读（值为readonly,单值属性）
Checked 初始化选中状态（值为checked，单值属性）

Html 其它标记

Cols和rows属性用与显示多行文本。

各种字体、Entities

HML文件结构

语言字符集？？？

Body部分的文字背景色背景图设置

Margin 页面留白

文字布局表格进阶多媒体页面企业邮箱登录界面

常见样式：
设置边框：border-color/border-style/border-width/
设置可见：display（值为none时元素不显示）
设置鼠标指针显示：cursor(常设值有：pointer（手掌）、wait(沙漏))，可以添加url(cur或ani格式的图标自设指针形状)
设置链接：url(链接地址)

div块文字的对齐方式

marquee 跑动文字及其属性directio方向 behavior设置

Embed插入多媒体 href添加链接 target

企业邮箱综合练习

<frameset rows="35%,*" frameborder=1 framespacing=15 bordercolor="dark" >
<frame src="top.html" scrolling="no"/ noresize>
<frameset cols='40%,60%' frameborder=3 rows=‘按照例的百分比分割’>
<frame src="left.html"/ noresize>
<frame src="right1.html" name=right/>

</frameset>