• HTML基础


    1. HTML介绍

    1.1 web服务本质

    浏览器发送请求 --》HTTP协议 --》服务端接收请求 --》服务端返回响应 --》 服务端把HTML文件内容发给浏览器 --》浏览器渲染页面

    1.2 HTML是什么

    超文本标记语言(hypertext Markup Language,HTML) 是一种用于创建网页的标记语言。

    HTML使用标签来描述网页

    1.3 HTML文档结构

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>    
    </head>
    <body>
    
    </body>
    </html>
    
    <!--
    <!DOCTYPE html>  指定当前html的版本以及风格
    <html lang="en"></html>  表示根标签,中间所有的内容才是我们真正html,lang="en"表示哪个国家的语言
    <head></head>  定义网页的全局信息
    <meta charset="UTF-8">  html的编码格式
    <title>Title</title> 网站的标题
    <body></body>  显示网页的主要内容的
    -->
    

    1.4 HTML标签格式

    HTML标签是由尖括号包围的关键字

    1 标签的书写,
    双标签,<head></head>
    单标签  <meta charset="UTF-8">
    2 标签里面的属性
    <标签名 属性名="属性值"></标签名>
    <标签名 属性名="属性值" />
    <标签名 id="属性值" class="属性值 属性值 属性值"></标签名>
    <标签名 >内容</标签名>
    <标签名 属性名="内容"/>
    

    1.5 HTML注释

    <!--注释内容-->
    

    2.HTML常用标签

    2.1 head内常用标签

    <title></title>:网站的标题
    <style></style>:定义内部样式表
    <script></script>:定义JS代码或引入外部JS文件
    <link/>:引入外部样式表文件或网站图标
    <meta/>:定义网页原信息
    
    <!--2秒后跳转到对应的网址,注意引号(了解)-->
    <meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
    
    <!--name属性:主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类用的。
    <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
    <meta name="description" content="老男孩教育Python学院">
    

    2.2 body内常用标签

    2.2.1 基本标签

    <b>加粗</b>
    <i>倾斜</i>
    <s>删除线</s>
    <u>下划线</u>
    <sup>上标</sup>
    <sub>下标</sub>
    <p>段落标签</p>
    <h1>标题1</h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6</h6>
    <br>换行
    <hr>分割线
    

    2.2.2 特殊字符

    &nbsp; 空格
    &lt; <
    &gt; >
    &amp; &
    &yen; ¥
    &copy; 版权
    &reg; 注册
    

    2.2.3 div标签,p标签,span标签

    块级元素:
    <div></div>:单独成行,没有任何的文本显示效果,用于布局。
    
    <p></p>:以段落的形式显示文本,段落独占一行,它也有上下文之间的垂直空白距离,字体大小不发生变化
    
    行级元素:
    <span></span>:可以让多个span元素在一行里面显示,无任何的字体效果,可以处理一行文本内的文字不同效果。
    

    2.2.4 a标签

    <a>内容</a>:超链接标签,设置页面中允许被点击的内容,完成了网页之间的跳转。
    
    href:链接的url,网页想要跳转到的位置
    target:打开目标链接的形式
    	1 _blank:打开一个新的页面
    	2 _self:在自身网页打开该网页
    title:当鼠标悬停时,提示的文字
    
    什么是URL?
    URL是统一资源定位器(Uniform Resource Locator)的缩写,也被称为网页地址,是因特网上标准的资源的地址。
    URL举例
    http://www.sohu.com/stu/intro.html
    http://222.172.123.33/stu/intro.html
    
    URL地址由4部分组成
    第1部分:为协议:http://、ftp://等 
    第2部分:为站点地址:可以是域名或IP地址
    第3部分:为页面在站点中的目录:stu
    第4部分:为页面名称,例如 index.html
    各部分之间用“/”符号隔开。
    

    2.2.5 列表

    无序列表
    <ul class="a" type="circle">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <!--无序列表标签
    type属性:
    disc(实心圆点,默认值)
    circle(空心圆圈)
    square(实心方块)
    none(无样式)
    -->
    
    有序列表
    <ol type="A" start="2">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>
    <!--有序列表标签
    type属性:
    1 数字列表,默认值
    A 大写字母
    a 小写字母
    Ⅰ大写罗马
    ⅰ小写罗马
    -->
    

    2.2.6 标题列表

    <dl>
      <dt>标题1</dt>
        <dd>内容1</dd>
      <dt>标题2</dt>
        <dd>内容1</dd>
        <dd>内容2</dd>
    </dl>
    

    2.2.7 表格

    <table>
      <thead>
        <tr>
          <th>序号</th>
          <th>姓名</th>
        </tr>
      </thead>
      <tbody>
    		<tr>
           <td>1</td>
            <td>aa</td>
         </tr>
    		<tr>
            <td>2</td>
           <td>zz</td>
         </tr>
       </tbody>
    </table>
    
    如何使用表格?
    1)创建表格
    定义表格:<table></table>
    创建行:<tr></tr>
    创建列(单元格):<td></td>
    2)表格的属性:
    table属性
    (1)width:宽度
    (2)height:高度
    (3)align:对齐方式
    (4)border:边框
    (5)bgcolor:背景颜色
    (6)cellpadding:单元格内边距,内容与边框的距离
    (7)cellspacing:单元格外边距,框与框的距离
    
    tr属性
    (1)align :该行内容水平对齐方式,left/right/center
    (2)valign:该行内容垂直对齐方式,top/bottom/middle
    (3)bgcolor
    
    td属性:
    (1)align
    (2)valign
    (3)width
    (4)height
    (5)colspan:跨列
    (6)rowspan:跨行
    表格的标题:<caption></caption>
    	紧跟table之后,一个表格只有一个标题
    th 表格头部: 行标题或者列标题,字体有加粗的效果,它是放在tr中
    
  • 相关阅读:
    element-ui upload组件 on-change事件 传自定义参数
    Javascript Object 常用方法大全
    js 数组操作
    js的Dom操作
    js指引提示-下一步-下一步
    图片右上角添加标签
    自己平时遇到的问题---记录篇
    css的书写顺序
    WebSocket使用
    15个常用的javaScript正则表达式
  • 原文地址:https://www.cnblogs.com/yushan1/p/11649217.html
Copyright © 2020-2023  润新知