HTML基础

来源：互联网发布：淘宝网床上用品编辑：程序博客网时间：2024/05/18 12:35

HTM(超文本标记语言)课程：
   一；概述
     1.一种纯文本的网页技术，后缀为 .html/htm文件，由浏览器解释性运行
     2.依靠浏览器:IE/Firefox/Chrome/saf
    二：基础语法 --标记<标记名称>
      1/双标记（成对出现）：<h1></h1>
      2/单标记（只有一个）：</br>
      3/为标记定义属性:描述标记的各方面----空格隔开，多个属性也用空格隔开，值可以用一对双引号或一对单引号
      <h1 align="center">text<h1>
      4、注释
      5、html的标准结构：
          <html>
          <head></head>
          <body></body>
          </html>

    6.版本信息：指定文档的语法规范
     严格：最新
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
     过度：兼容
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
     框架
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
     <br />--新
     <br> --旧
7、head：定义和整个文档相关的信息（标题/刷新/编码方式）
     帅新：<meta http-equiv="refresh" content="3;url=login.jsp">
     编码方式：<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
8、body；内容

三：文本

1、普通文本和特殊字符
a、空格折叠：多个空格以及换行，折叠为一个
b、特殊字符：转义字符
    < &lt
    > &gt
    空格 &nbsp；
2、段落标记：
<p>文本</p>
<br />
3/标题：<hn></hn>
4/分组
<div></div>:适用于对于快级的元素分组
<span></span>：适用于对于行内元素分组
5、块级元素（block）：独占一行，h1，p，div，table，ol，ul，li
   行内元素（inline）：可用于和其他元素位于同一行，span，a
四、图片和连接
1、为页面添加图像
      <img src="url">
2、
<image src="" width="" wight="">
3、为页面添加超链接
      <a href="url">点击的内容</a>
      <a href="" target="_blank">click me</a> 添加新窗口
4、同一页面上的跳转
    <a href="#"></a> 回到页面顶端
   定义目标位置(锚点)：
   <a name="a1"></a>
定义一个连接：
<a href="#a1">to a1</a>
五：列表
<ul></ul>--unorder list 无序列表
<o1></o1>--order list   有序列表
<li></li>--list item     列表项

<ol>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
<ol>

<ul>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
<ul>
六：表格
1、用来显示网格数据，布局
2、表格的基本结构：table/tr/td
<table>
    <tr>
       <td></td>
       <td></td>
    </tr>
    <tr>
<td></td>
       <td></td>
    </tr>
</table>

3、常用属性
   ：border/align/vlign/width/hight/cellspacing(单元格之间以及和外边框之间的距离)
   /cellpadding（内边距）
4、表格的复杂结构
     a、可以为表格添加标题
      <caption>标题</caption>
    b、行分组
       thead/tbody/tfoot
5、不规则表格
    colspan属性跨列
    rowspan 属性跨行
6、表格的嵌套
七：表单
   1、form:承载页面元素，备于做提交
     <form action="a.jsp" method="post">
     <form>
   2、form可以承载的
   3、input:单标记，靠type属性不同取值
     a.类型
     <input type="text"/>
     <input type="password" />
     <input type="radio" />
     <input type=checkbok" />
     <input type="button" />--普通按钮
     <input type="file"/>--选择文件，以供上传
     <input tyep="hidden">--隐藏域，适用于记载那些不需要显示的关键数据
     b、常用属性
     id：需要的时候，添加唯一标示
     name:名值对的方式提交数据
     value：取决于需求
     maxleng：text，password
     readonly
     checked：单选，复选，默认选中
   4、列表框，下拉框：取决于size的取值
    <select>
     <option>选项一<option>
     <option>选项二<option>
    </select>
   如何选择：页面布局
5、多行文本框
    <textarea>
    </textarea>
6、label：文本标签
     <input type="radio" id="r1">
     <label for="r1">文本</abel>--点击文本就相当于点击了单选按钮的前的小圈了
7、fieldset：元素圈起来
       legend:为圈添加名称描述
       比如：
       <fieldset>
           <legend>标题</legend>
       </fieldset>

8、iframe：浮动框架
   a、显示：一个浏览器窗口中显示多个html页面
      main.html---页面
   a.html---广告页面
   b、嵌入到某个html页面里：
       <iframe src="url"></iframe>
9、frameset
eg：
   <frameset rows="15%,*">
    <frame src="student/s1.jsp" name="top">
<frameset cols="15%,*">
     <frame src="student/s2.jsp" name="left">
     <frame src="student/s3.jsp" name="main">
</frameset>
</frameset>

0 0