首页 > 其他分享 >今日内容 前端之HTML基础知识

今日内容 前端之HTML基础知识

时间:2022-08-22 17:56:33浏览次数:112  
标签:body 表格 标签 前端 单元格 基础知识 HTML table

  • 前端简介

1.前端与后端

前端
与用户直接打交道的操作界面都可以称之为是前端
后端(幕后工作者)
不直接与用户打交道的内部真正执行核心业务逻辑的代码程序

2.前端核心基础

HTML:网页的骨架
CSS:网页的样式
JS:网页的动态

  • HTTP超文本传输协议

1.四大特性

1).基于请求响应
2).基于TCP/IP之上作用于应用层的协议
3).无状态
4).无/短连接

2.数据格式

请求数据格式
1).请求首行(请求方式:有很多种 协议名称及版本)
2).请求头(一大堆K:V键值对)
3).换行
4).请求体(携带一些敏感的数据 不是所有的请求都有请求体)
响应数据格式
1).响应首行(响应状态码)
2).响应头(一大堆K:V键值对)
3).换行
4).响应体(一般情况下就是浏览器要展示给用户看的数据)

3.响应状态码

利用数字来表示一些复杂的情况说明(类似于暗号)

 

 

  • HTML简介

HTML,全称“Hyper Text Markup Language(超文本标记语言)”,简单来说,网页就是用HTML语言制作的。HTML是一门描述性语言,是一门非常容易入门的语言。

1.HTML文件结构

HTML文件结构
     <html>  所有的代码都必须写在html标签内部
        <head></head>  head内的数据一般都不是给用户看的
       <body></body>  body内的数据就是浏览器展示给用户看的
    </html>

HTML注释语法
<!--注释内容-->

HTML标签的分类
1.单标签(自闭和标签)
<img/>
2.双标签
<a></a>

 

  • HTML基础标签

1.head内常见标签

head标签代表页面的“头”,定义一些特殊内容,这些内容往往都是“不可见内容”(在浏览器不可见)。

<head>内部标签 说明
<title> 控制标签页小标题
<style> 内部支持CSS
<link> 引入外部CSS文件
<script> 内部支持编写JS代码,还可以通过src属性引入外部JS文件
<meta> 通过内部属性的不同可以有很多功能 
<base> 定义页面所有链接的基础定位(用得很少)

2.body内基本标签

标签 说明
h1~h6 标题标签
p 段落标签
hr 水平分割线
br 换行符
u 下划线
i 斜体
s 删除线
b 加粗

 

 

3.body内基本符号

标签 说明
&nbsp; 空格
&gt; 大于号
&lt; 小于号
&amp; &
&yen;
&reg; 注册图标
&copy; 版权图标

4.body内布局标签

<div>
    块儿级标签  ( h1~h6 p hr br)
<span>
    行内标签    (u i s b)
 
1.块儿级标签是可以通过CSS调整为不独占一行
2.标签之间很多时候可以嵌套
    块儿级可以嵌套任何类型的标签
    行内标签只能嵌套行内标签

 

 

5.body内a标签和img标签

1.a标签
    链接标签
         href        可以填写网址 点击自动跳转
                    href还可以填写其他标签的id值 实现锚点功能
      target     可以控制是否新建页面跳转
                    _self
                    _blank
2.img标签
    图片标签
        src        填写图片地址(网络地址 本地地址)
        title    鼠标悬浮在图片上就会有提示信息
         alt        图片加载失败提示的信息
       height  调整图片的高度
           width  调整图片的宽度
            上述两个调整一个另外一个等比例缩放

 

6.列表标签

无序列表
     <ul>
        <li>python</li>
        <li>golang</li>
        <li>linux</li>
    </ul>
      页面上有规则排列的横向或者竖向的多个元素几乎使用的都是无序列表
有序列表
    <ol type="I" start="10">    
          <li>第一项</li>
          <li>第二项</li>
          <li>第二项</li>
    </ol>
标题列表
    <dl>
      <dt>标题1</dt>
        <dd>内容1</dd>
      <dt>标题2</dt>
        <dd>内容1</dd>
        <dd>内容2</dd>
    </dl>

 

7.表格标签

                                                                                                                                                                                       表格基本标签

标签 语义 说明
table table(表格) 表格
tr table row(表格行)
tb table data cell(表格单元格) 单元格

                                                                                                                                                                                        表格结构标签

标签 语义 说明
thead table head 表头
tbody table body 表身
tfoot table foot 表脚
th table header 表头单元格

7.1表格完整语法

<table>

    <caption>表格标题</caption>

    <!--表头-->

    <thead>

        <tr>

            <th>表头单元格1</th>

    <th>表头单元格2</th>

        </tr>

    </thead>

    <!--表身-->

    <tbody>

        <tr>

            <td>标准单元格1</td>

            <td>标准单元格2</td>

        </tr>

        <tr>

            <td>标准单元格1</td>

            <td>标准单元格2</td>

        </tr>

    </tbody>

    <!--表脚-->

    <tfoot>

        <tr>

            <td>标准单元格1</td>

            <td>标准单元格2</td>

        </tr>

    </tfoot>

</table>
View Code

 

标签:body,表格,标签,前端,单元格,基础知识,HTML,table
From: https://www.cnblogs.com/tai-yang77/p/16613708.html

相关文章

  • 前端二次非对称RSA加密密文太长的问题
    文章不易,请关注公众号 毛毛虫的小小蜡笔,多多支持,谢谢。有任何问题都可以留言咨询。 问题两个平台项目中,各自的前后端的密码传输,都用了非对称RSA加密。 流程是这样......
  • 了解前端路由 hash 与 history 差异
    路由跳转有两个模式可以选择一个是hash一个是 history二者有什么区别呢我们来细说首先是路由默认的hash模式hash模式最显著的特点就是会在url链接后面加是一个#随......
  • Linux 基础知识总结
    Linux目录结构总结/:根目录,一般根目录下只存放目录,在Linux下有且只有一个根目录。所有的东西都是从这里开始。当你在终端里输入“/home”,你其实是在告诉电脑,先从/(根目录)开......
  • testng基础知识:注解的执行顺序
    testng基础知识:注解的执行顺序1.单类,无继承父子关系code:1publicclassbasicTest{2@BeforeSuite(alwaysRun=true)3publicvoidbeforeSuite_b......
  • Linux虚拟机Nginx代理vue前端与SpringBoot后端资源
    1.Nginx安装配置详细参见菜鸟教程:https://www.runoob.com/linux/nginx-install-setup.html2.nginx.conf内容usernginx;worker_processes1;#设置值和CPU核心数......
  • 【HTML】三种方法使HTML单页面输入密码才能访问
    方法一<scripttype="text/javascript">functionpassword(){vartestV=1;varpass1=prompt('请输入密码','');while(testV<3){if(!pass1)......
  • html页面嵌套其他网站页面的方法
    直接上代码:html页面嵌套其他网站页面的方法<div><!--第一种:使用object标签--><objecttype="text/html"data="https://www.baidu.com"style="width:1000px;heigh......
  • html网页乱码原因以及解决办法
    一、乱码造成原因1、如果网页源代码是gbk编写的,而内容中的文字是utf-8的,那么,此时打开浏览器就会出现HTML乱码。反之也会出现乱码。2、HTML网页编码是gbk,但是程序从程序库......
  • html table 美化-html如何用css美化表格
    html用css美化表格的方法:首先创建一个HTML示例文件;然后在body中创建table表格;最后通过style标签给表格添加css样式即可。代码下面通过示例来看看。/*表格样式*/table{......
  • 如何在 HTML 中调整图像大小?
    了解在HTML中调整图像大小的不同技术、何时应避免在浏览器端调整大小,以及在Web上操作和提供图像的正确方法。如果您的图像不适合布局,您可以在HTML中调整其大小。在......