Html基础-CSDN博客

本文链接：https://blog.csdn.net/qq_58718166/article/details/123345980

本文详细介绍了HTML的基本概念、标记语法、网页架构，包括标题、段落、图片、超链接、列表、表格、表单等元素的使用。同时提到了CSS在定义网页内容显示样式中的作用，涵盖了文本样式、图片、布局和表单样式等方面。此外，还提及了视频、音频元素以及页面导入和预格式化文本的处理。

摘要由CSDN通过智能技术生成

1.HTML 构架网页的内容 CSS 定义内容显示的样式

HTML
   网页=标题+链接+图片+视频+文字+声音+表单

   表单和表格

HTML
概念
   （1)超文本标记语言(HTML,XML[dom4j]) xml dtd
   （2)用来设计网页的程序，也是一种计算机语言。
   （3）网页文件的格式：以htm或者以html结尾
   （4）网页是用浏览器打开，最后在浏览器窗口中显示设计效果。

标记的语法

   （1）标记语法：<起始标记属性名="属性值" .....>标记的内容</结束标记>
   (2)规则
       1)不区分大小写
       2)一般成对出现,极少数单独出现
       3)可相互嵌套,但不能交叉嵌套(先开始的后结束)
       4)属性如果起冲突,就近原则.

   所以的标签都有
   name:自己起的
   class
   id
   style:值是固定的

1.基本架构
<!DOCTYPE html>
<html>
   <head><title>网页的头部</title></head>
   <body>
       网页的内容
   </body>
</html>

   (4)语法规定了所有的html标记,有哪些标记,标记有哪些属性

       6)加粗   <b></b> <strong></strong>
       7)斜体   <i></i> <em></em>
       8)下划线   <u></u>
       9)上部标识下部标识   <sub></sub> <sup></sup>
       10)删除线    <s></s>

   2.图片标记
   路径
       绝对路径:从盘符开始 ,不建议使用
       相对路径:相对于这个页面来说
           往该网页的目录外查找 ../
           往该网页的目录之下目录名
       <img src="改图片的路径" alt="显示文字" width="宽度" height="高度" hspace="水平空白" vspace="垂直空白"/>

   3.超链接
       <a href="" target="_self|_blank(新打开一个窗口)"> </a>

       锚链接
       <a href="地址#锚地址" target="_self|_blank(新打开一个窗口)"> </a>
       <a name="锚地址">
   4.列表

   有序
       <ol type="1|A|a|I|i" start="开始位置">
           <li></li>
           <li type="1|A|a|I|i"></li>
       </ol>
   无序
       <ul type="disc(实现圆) |circle(空心圆)| square(正方形)">
           <li></li>
           <li></li>
       </ul>
   定义列表
       <dl>
           <dt>小标题
           <dd>具体内容
           <dt>小标题
           <dd>具体内容
       </dl>
   5.
       表格的方式

           1.完整版
               <table>
                   <caption></caption>
                   <thead>
                       <tr><th></th></tr>
                   </thead>
                   <tbody>
                       <tr><td></td></tr>
                   </tbody>
                   <tfoot>
                       <tr><th></th></tr>
                       <tr><td></td></tr>
                   </tfoot>
               </table>

       2.常见版本

table 属性

                  frame：控制表格最外层的四条框线
                   border:边框粗细
                   bordercolor:边框颜色
                   bgcolor:背景颜色
                   background:背景图片
                   cellspacing:单元格与单元格之间的距离
                   cellpadding:单元与数据之间的距离
                   width:宽度
                   height:高度
                   rules:表格行和列的线 none all cols rows
           caption 属性
               align:center(top)|left|right|bottom

       行   tr 属性
               align:水平位置   left|center|right
               valign:垂直位置   middle |top|bottom
               bordercolor:边框颜色
               bgcolor:背景颜色
               background:背景图片
               width:宽度
               height:高度
       列   th,td 属性
               align:水平位置   left|center|right
               valign:垂直位置   middle |top|bottom
               bgcolor:背景颜色
               background:背景图片
               width:宽度
               height:高度

           rowspan 跨行
           colspan 跨列

           表单
           <form action="地址" method="post|get">
               表单元素....
               ......
               .......
           </form>
           POST 和GET 区别?
           1.安全性
           2.长度URL地址有限的,所有get提交的数据也是有限的
           3.效率:


           表单元素
               <input type="">
           文本框   “text”
                       属性
                       name
                       size
                       maxlength
                       value
                       placeholder 提示值
                       required 不能为空
                       pattern 正则
           密码框 type=“password”
                       属性
                       name
                       size
                       maxlength
                       value
                       placeholder
           单选框 type=“radio”
                       属性
                       name
                       checked
                       value
           多选框 type=“checkbox”
                       属性
                       name
                       checked
                       value
           文件 type=“file”
                       属性
                       name
                       multiple
           数字 type=“number”
                       属性
                       name
           邮箱 type=“email ”
                       属性
                       name
           日期   type="date"

           按钮
           ...

           下拉框
                   select
                       属性
                       size
                   option
                           value:会提交的数据

   <input type="submit" >   <button>提交</button>:       submit 和标签 button 才具有提交的功能
           <input type="button" > 普通按钮:一般拿来做绑定事件

       注意:有disable属性的表单元素,改元素不会进行提交.

声像：
   <video src="HD_VBR35.mp4" controls="controls" width="500px" height="500px">
       您的浏览器不支持 video 标签。
   </video>

导入页面
<iframe src="top.html" width="100%"></iframe>

保留原样:<pre></pre>

常用特殊字符
    空格    
   版权   ©
   注册   ®
   >   >
   <   <
   &   &
   "   &qout;
扩展:
滚动标记
   <marquee width="" height="" loop="滚动次数" align=""
   behavior="滚动方式: scroll slide alternate(两端之间来回滚动)"
   scrollamount="滚动速度" scrolldelay="一字一顿"
   direction="up|down|left|right" hspace="" vspace=""></marquee>