HTML基础

okplouh

已于 2023-10-07 15:10:58 修改

阅读量55

点赞数

文章标签： html 前端

于 2023-10-07 15:04:27 首次发布

本文链接：https://blog.csdn.net/okplouh/article/details/133640121

版权

##HTML
   1.概念
        Hyper Text Markup Language 超文本标记语言
             *超文本：超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状结构
             *标记语言：
                       *由标签构成的语言 <标签名称>  html xml
            *标记语言不是编程语言
     2.入门 
          *语法
         1.html文档后缀名 .html 或 .htm
                2.标签分类：
                     1.围堵标签：有开始标签和结束标签  <html></html>
           2.自闭和标签：开始标签和结束标签在一起  ：</br>
         3.标签可以嵌套
                        需要正确嵌套 不能你中有我 我中有你
                4.在开始标签中可以定义属性。属性是由键值对构成，值需要引号 引起来
                5.html的标签不区分大小写，建议小写
<html>
      <head>
	      <title>title</title>
	  </head>
	  
	  <body>
	     <font color='red'>萱萱怎么这么漂亮哇</font></br>
		 
	     <font color='red'>萱萱怎么这么漂亮哇</font>
		 
	  </body>
	  
	 
</html>



3.标签
   1.文件标签：构成html最基本的标签
        *html：html文档的根标签
       *head：头标签 用于指定html文档的一些属性，引入外部资源
       *title：定义标题标签
       *body：体标签
            <!DOCTYPE html> :html5中定义该文档是html文档的方式




   2.文本标签：和文本有关的标签
         <h1>to<h6>：标题标签 h1-h6字体大小逐渐递减
     <p>：段落标签
     <br>:换行标签
     <hr>：展示一条水平线
           color：颜色
              width：宽度
              size:高度
              align:对其方式
                     *center：居中
                     *left:左对齐
     <b>：字体加粗
     <i>：字体斜体
     <font>：字体标签
                *属性 color 颜色
              size  大小
              face 字体
           属性定义：
              color:
          1. #值1值2值3：值的范围00-FF之间
              width 宽度：
                   

   3.图片标签：展示图片
              img
            src:用来指定图片位置
                       * ./ 代表当前目录 ./image/1.jpg
               ../代表上级目录
   4.列表标签:
     *有序列表
           *ol  <ol type="A" start="5"> </ol>
         *li
         *无序列表
             *ul  <ul type="square"> </ul>
              *li
   5.链接标签:
         a:定义一个超链接
             href:指定访问资源的URL
             target:指定打开资源方式
                         *_self :默认值，在当前页面打开
                         *_blank:在空白页面打开
 <a href="https://www.baidu.com/" target="_blank"><img src="D:\javaweb Demo\html\img.png"/></a>
           
   6.div与span <!-- div:每一个div占满一整行 块级标签
     span :文本信息在一行展示 ，行内标签 内联标签
     -->
   7.语义化标签：提高程序可读性
       <header>
    <footer>
   6.表格标签：
        *tbale: 定义表格
                     border="1"   宽度
            width="50%"   边框
            cellpadding="0" 定义内容与单元格之间的距离
            cellspacing="0" 定义单元格之间的距离 如果为0，则单元格的线会合成一条
            bgcolor="#700##" 
            align="center"：对其方式
        *tr:定义行
        *td:定义单元格
               *colspan:合并列
         *rowsapn:合并行
        *th:定义表头单元格

       <caption>:表格标题
       <thead>:表示表格的头部分
       <tbody>:表示表格的体部分
       <tfoot>:表示表格的脚部分

##HTML标签：表单标签
     *表单：
                *概念：用于采集用户输入的数据的。用于和服务器进行交互
from:用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围
        *属性：
          * action:指定提交数据的URL
          * method:指定提交方式
               *分类：一共7种，2种常用
                  get:
                     1.请求参数会在地址栏中显示
                     2.请求参数大小有限制
                     3.不太安全
                   post:
                     2.请求参数不会在地址栏中显示。会封装在请求体中
                     2.请求参数大小没有限制
                     3.较为安全

           表单项中的数据想要被提交：必须指定其name属性
 
 *表单项标签：
        *input：可以通过type属性，改变元素展示样式
                type属性：
                     *text:文本输入框 默认值
                           *placeholer:指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息
                     *password：密码输入框
                     *radio:单选框
                        *注意：1.要想让多个单选框实现单选效果，则多个单选框的name属性值必须一样
                                   2.一般给每个单选框提供value属性，指定其被选中后提交的值
                                   3.checked属性，可以指定默认值
                     *checkbox：复选框
                                   2.一般给每个单选框提供value属性，指定其被选中后提交的值
                                   3.checked属性，可以指定默认值
                   *file：文件选择框
                   *hidden：隐藏域。提交一些信息
                   *按钮：
                             submit：提交按钮，可以提交表单
                             button:普通按钮
                             image：图片提交按钮
                                     *src属性指定图片路径
              *lable:指定输入项的文字描述信息
                      *注意：lable的for属性一般会和 input 的id属性对应。如果对应，则点击lable区域，会让input输入框获取焦点
      
        *select：下拉列表
                   *子元素：option,指定列表项
 
        *textarea:文本域
              *cols:指定列数，每一行有多少个字符
              *rows:默认多少行

okplouh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
HTML基础

1.围堵标签：有开始标签和结束标签 *超文本：超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状结构。*由标签构成的语言 html xml。Hyper Text Markup Language 超文本标记语言。1.html文档后缀名 .html 或 .htm。*标记语言不是编程语言。
复制链接

扫一扫