HTML基础教程-优快云博客

本文链接：https://blog.youkuaiyun.com/ljh_learn_from_base/article/details/72819088
网页三剑客，也就是photoshop,flash,dreamweaver。
使用Notepad++的注意事项：
1、设置编码个格式：
  （格式）-（编码字符集）-（中文）-（gb2312)简体
<html>--文档标签
<head>--头部包括
     <title>--网页标题
     <meta>--通知浏览器页面信息--字符集、
     http-equiv 超文本传输协议标题信息  （ http，HyperText Transfer Protocol)
             <meta http-equiv="content-type" content="text/html; charest=gb2312/>

             提供搜索引擎网页关键信息 
             <meta name="keywords" content="中国古典名著之红楼梦"/>--搜素内容
             <meta name="decoration" content="林黛玉的身世之谜"/>---内容描述
 <body>--主体正文
    <h1>...</h1>
    <h2>...</h2>
    <h3>...</h3>
    <h4>...</h4>
    <h5>...</h5>
    <h6>...</h6>  。。 标题标签
  段落标签： <p>..</p>
  换行标签：<br/>   (break)
  下划线：  <hr/>(horizontal ruler)
  粗体：    <strong>..</strong>
  斜体：    <em>..</em> (emphasize )
  特殊符号：
     空格： .,
     大于号：>  (greater than)
     小于号：<   (less than)
     引号(")："  (quotes)
     版权号?：&copy;
    注释号：<!--注释内容-->
图像标签：
常见的图片格式有：1.JPG(JPEG)：应用较广，JPG文件可包含1670万中颜色，但不支持透明和动画。
2.GIF：该格式支持透明和动画，包含256中颜色。
3.PNG  4.BMP
基本语法：<img src="图片地址" alt="代替文字" title="标签悬停提示文字" width="宽度" height="高度" />
alt:   alter替代
超链接标签：
语法：<a href="链接地址" target="_self/_blank" ></a>

属性值
值	描述
_blank	在新窗口中打开被链接文档。
_self	默认。在相同的框架中打开被链接文档。
_parent	在父框架集中打开被链接文档。
_top	在整个窗口中打开被链接文档。
framename	在指定的框架中打开被链接文档。

超链接的应用场合：1.页面间链接；
2.锚链接：如要文档1链接到文档2的指定位置；在指定文档2位置建书签（锚）：<a name="书签名">...</a>
在文档1超链接的地方：<a href="路径.html#书签名"></a>
 如要链接到当前文档的指定位置：<a name="书签名">热点</a> <a href=".html#书签名"></a>
<a href="#">默认返回顶部</a>
3.功能性链接：当单击链接时会启动本机自带的某个应用程序，如邮箱、QQ 等链接。
  [<a href="mailto:bdqnWebmaster@bdqn.cn">联系我们</a>]

设置--首选项--新建--默认语言/自动完成--函数自动完成
我的电脑--工具--文件夹选项--查看--扩展名
[Alt]+[Tab]组合键可以循环切换窗口。
[Ctrl+A]组合键，可选择所有的文件。
在记事本窗口中按[F5]键，可以插入当天的日期和时间。


列表：列表就是数据的一种展示形式。
无序列表【Unordered List】（li是lists的缩写）：

<ul>--<li>，<li>属性：type="disc/square/circle"
有序列表：【Ordered List】
<ol>--<li>,<li> 属性：type="1/A/I   start= "
start 表示从几开始
定义列表：一般用于有标题和标题解释性内容或图片和文本内容混合排列场合。
<dl> <dt> <dd>
dl:  definition list
dt:definition title
dd:definition description
表格：
<table>-<tr>-<td>
tr: table rows  行
td:  table data cell  数据单元格

<table align="left/center/right"  border="边框的宽度"  width="表格的宽度"
        height="表格的高度"  cellspacing="单元格之间的距离"  cellspadding="字与单元格边框距离">
<caption>居中加粗</caption>--定义标题
  <tr height=""  align="left/center/right"  valign="top/bottom/middle/baseline"    >
只有数据单元格才有跨行跨列的 说法
<td  colspan="跨列数" rowspan="跨行数"  width=""  align="left/center/right"  valign="top/bottom/middle/baseline"  >
 
框架：
1.<frameset>框架：由<frameset>与<frame>两标签组成，无<body>标签。
 <frameset rows="20%,*" frameborder="1/0" border=""  bordercolor="" >
    <!--有无边框-->
   <frame src="" name="" scrolling="no/yes" noresize="noresize" />
                           <!--有无滚动条-->  <!--是否调整边框尺度-->
   <frameset cols="20%,*" frameborder="1/0" border=""  bordercolor="" >
   <frame  src="" name="" scrolling="no/yes" noresize="noresize" />
   <frame  src="" name="" scrolling="no/yes" noresize="noresize" />
   </frameset>
</frameset>
实现框架窗口间的关联:
 在框架页面：<fram src="" name="main" />
 在链接页面：<a href=""  target="main" ></a>

在框架中打开窗口
不用打开一个完整的浏览器窗口，使用 target 更通常的方法是在一个 <frameset> 显示中将超链接内容定向到一个或者多个框架中。可以将这个内容列表放入一个带有两个框架的文档的其中一个框架中，并用这个相邻的框架来显示选定的文档：
<frameset cols="100,*">
  <frame src="toc.html">
  <frame src="pref.html" name="view_frame">
</frameset> 

当浏览器最初显示这两个框架的时候，左边这个框架包含目录，右边这个框架包含前言。
这是 "toc.html" 的源代码：
<h3>Table of Contents</h3>
<ul>
  <li><a href="pref.html" target="view_frame">Preface</a></li>
  <li><a href="chap1.html" target="view_frame">Chapter 1</a></li>
  <li><a href="chap2.html" target="view_frame">Chapter 2</a></li>
  <li><a href="chap3.html" target="view_frame">Chapter 3</a></li>
</ul>
请注意，在文档 "toc.html" 中，每个链接的目标都是 "view_frame"，也就是右边的框架。
当用户从左边框架中的目录中选择一个链接时，浏览器会将这个关联的文档载入并显示在右边这个 "view_frame" 框架中。当其他链接被选中时，右边这个框架中的内容也会发生变化，而左边这个框架始终保持不变。


 
2.<iframe>内联框架：
 <body>

   <a href="" target="main" ></a>
    <iframe src="" name="main" width="50%/500" height="" frameborder="1" scrolling="no"
noresize="noresize"


表单：就是一个将用户信息组织起来的容器。将需要用户填写的内容放置在表单容器中，当用户单击提交按钮后，表单会将数据统一发给服务器。
1、表单元素及其格式：
 在HTML中，使用<form>标签来实现表单的创建，它属于容器标签。
<form>标签有两种属性：method="post/get"   action="URL后台服务器" （空时则默认为提交到本网页）
 <input>属性：type=text/password/checked/radio/submit/reset/file/hidden/image/button
   name="指定表单元素名称"   value="指定表单元素的初始值"  size="指定表单元素的初始宽度" 
  maxlength="指定可在text或password元素中输入的最大字符数"  checked="ckecked"     
 1.文本框：type="text"
 <form method="post" action="" >
 <p>名   字 :
    <input type="text" name=""  > </p>
 <p>姓   氏 :
    <input type="text" name="" value="张" >
                             <!--默认值--> </p>
 <p>登录名:
    <input type="text" name="" size="" maxlength="" >
                          <!--文本框长度--> <!---->

<form action="URL后台服务器" method="get/post" enctype="multipart/form-data">
get:提交内容在地址栏出现，不安全。post:提交内容作为数据包提交，不可见。
enctype:编码方式 enc: encode
multipart/form-data 是指二进制传输，数据形式
The form must have its method attribute set to POST and an enclosure type ofmultipart/form-data. 
这个表单必须将它的 method 属性设置为 POST，并将附件类型设置为 multipart/form-data。
<input type="元素类型" name="元素名" size="大小/字符数" maxlength="允许输入最大字符数" value="初始值"
   checked="checked"(默认值) />
 type:text(文本框)/password(密码框)/radio(单选框)/checkbox(多选框)/reset(重置按钮)/submit(提交按钮)/
     button(普通按钮)/image(图片提交按钮)/file(文本域)

<select name="" >---列表框
   <option value="" selected="selected">数据1</option>
   <option value="" >数据2</option>
   <option value="" >数据3</option>
</select>

文本域<textarea name="" cols="显示字符" rows="显示行数"> 显示内容</textarea>

表单的只读与禁用设置：
  readonly="readonly"   disabled="disabled"  

语义化的表单：语义化的结构使得页面更加合理，代码更加简洁，同时符合W3C的Web开发标准。
1.域:就是将一组表单元素放到<fieldset>标签内时，浏览器就会以一种特殊的方式来显示，这些表单元素会有特殊的边界效果。
2.域标题：<legend>标签内的内容视为域的标题。
<form>
    <fieldset>
    <legend>域标题</legend>
   ....
    </fieldset>
</form>

表单元素的标注：目的是为了增强鼠标的可用性，当用户使用鼠标单击标注的文本内容时，浏览器会自动将焦点转移到与该标注相关的表单元素上。
 <label for="male">男</label>
 <input type="radio" name="gen" id="male" />