HTML5的基础认识

最新推荐文章于 2022-07-12 21:47:45 发布

测试学习之路

最新推荐文章于 2022-07-12 21:47:45 发布

阅读量273

点赞数 1

分类专栏： HTML的学习文章标签： html5

本文链接：https://blog.csdn.net/qq_46278971/article/details/104571269

版权

HTML的学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、什么是网站

网站（Website）是指在因特网上，根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合。简单地说，网站是一种通讯工具，就像布告栏一样，人们可以通过网站来发布自己想要公开的资讯，或者利用网站来提供相关的网络服务。人们可以通过网页浏览器来访问网站，获取自己需要的资讯或者享受网络服务。网站则由很多网页构建而成。

1、网站的建站流程：

在这里插入图片描述

二、什么是网页

现在在你眼前，出现在显示器上的这个 “ 东西 ” ，就是一个网页。网页实际是一个文件，他存放在世界某个角落的的某一台计算机中，而这台计算机必须是与互联网相连的。网页经由网址（ URL ）来识别与存取，当我们在浏览器输入网址后，经过一段复杂而又快速的程序，网页文件会被传送到你的计算机，然后再通过浏览器解释网页的内容，再展示到你的眼前。

1、网页的组成：

在这里插入图片描述

2、网页制作标准：

WEB标准是网页制作的标准，它不是一个标准，它是根据网页的不同组成部分生成的一系列标准。这些标准大部分由W3C起草发布，也有部分标准由ECMA起草发布

3、网页的组成：

结构（HTML）+ 表现（CSS）+ 行为（JS）

        HTML: 实现网页结构（网页内容）

        CSS: 实现页面的修饰 、表现

        JS ：实现的是交互效果，可以让页面动起来

三、什么是HTML

HTML 指的是超文本标记语言 (Hyper Text Markup Language) www万维网的描述性语言。
XHTML指可扩展超文本标记语言（标识语言）（EXtensible HyperText Markup Language）是一种置标语言，表现方式与超文本标记语言（HTML）类似，不过语法上更加严格。
HTML5指的是HTML的第五次重大修改（第5个版本）

1、HTML基本结构：

在这里插入图片描述

2、HTML语法：

    1：常规标记   （双标记） 
        
          <html></html>   有开始标记，也有结束标记

    2： 空标记 （单标记） 
          
          <meta class="top  top2" charset="utf-8">        有开始标记，没有结束

   说明：尖叫号里面的第一个单词，我们可以称之为标签、标记、元素；
             标签是可以没有属性的，也可以有多个属性；
             属性和属性之间是不分先后顺序的，中间要用空格隔开。
             标记和属性之间也要用空格隔开；   
             当一个属性有多个属性值的时候，属性值和属性值之间也是要用空格隔开的。

3、常用标记：

         文本标记：

            文本标题：
                      h1        一级标题     
                                 说明： 一个页面一般只有一个一级标题，如果页面很长，可能会出现2、3个一级标题，  最重要的，  放logo；

                      h2        二级标题    3、4个
                      h3        三级标题    可以多用一些
                      h4        四级标题    可以多用一些
                      h5
                      h6        六级标题


            段落标记：p
            转义字符：
                      空格：&nbsp;
                      左边的尖角号：&lt;
                      右边的尖角号：&gt;
                      备案图标：&copy;
                      注册商标：&reg; 


             加粗： b         普通的加粗   
                        strong   语义化，更强调的意思
             倾斜： i     em
             强制换行：br     空标记
             水平线： hr    空标记
             上标：sup
             下标：sub

下划线：
ins 比较常用的插入的意思
u 比较早的标签，基本不用了

删除线：del 比较常用删除语义化
s 比较早的标签，基本不用了

           div：页面布局，区域划分
           span: 文本节点
           div、span:本身是没有默认样式修饰的，如果想改变他里面的样式，需要借助css来完成

4、列表：

  无序列表:
  <ul>
  <li>内容</li>
        </ul>
        type=""属性    改变默认的列表序号样式
        属性值：disc、square、circle
有序列表：
       <ol>
  <li>内容</li>
        </ol>
         type=""属性   改变默认的列表序号样式
         属性值： 1，a，A，i，I
         start=“”属性    设置列表序号开始的值     注：他的属性值必须是阿拉伯数字。

 自定义列表：
        <dl>
<dt></dt>      名词
<dd></dd>    解释
       </dl>

 插入图片：<img src="">

        属性：src: 用来添加路径的

5、路径：

              1、绝对路径：https://img12.360buyimg.com/n1/s450x450_jfs/t1/82971/37/9336/162231/5d70c8ceEbb9afef9/a36085b3c6debefc.jpg
                                                  /E/NZ2003/day2/课堂练习/img/img3.jpg
  
             2、相对路径： 当前    目标

                                            a:   当前文件和目标文件在同一个目录里       
                                            b:  当前文件和目标文件所在的文件夹在同一个目录里
                                            c:  当前文件所在的文件夹和目标文件所在的文件夹在同一个目录里   
                                          ../    向上反一级   ../../  向上返回两级
                                          ./     当前位置
                                           /     根目录
                           绝对路径和相对路径的区别：
	      绝对路径是指文件在硬盘上真正存在的路径
                                    绝对路径就是无论从外部还是内部访问，都能够通过此路径找到文件夹
                                    相对路径是相对于自身的，其他文件的位置，只能通过内部访问。 外部不能通过此路径访问到文件，通俗的来说，绝对路径是一条大家都能够通到目的地的路。而相对路径是一条只有你自己知道怎么走的路。											

     width:  设置宽度
     height:  设置高度
     alt:        当图片因为某种情况，没有正确显示出来的时，图片替换文本
     title:      标题，所有的标签都可以添加title这个属性   ，给元素添加标题
     border:   边框


        超链接：<a href=""></a>
                      href=""     添加路径的
         target：  设置打开方式     _blank   :  新窗口打开      _self  : 默认值，在当前窗口打开

                      <base  target=“_blank”>  设置超链接的共有的特性


       文件命名规范：用英文，不用中文。
                              用小写字母开头，后面可以链接下划线，连接符，数字或者$，不要用特殊字符

                              名字尽量简短。

	例：top      top-nav      top_nav     top1  top_nav1     top-nav2

	    首页.html   shouye.html    index.html
                                  新闻.html                            news.html
                                  关于我们.html                     aboutUs.html

6、表格：table

     	 <table border="1">
          <tr>
	   <td></td>
	   <td></td>
	   <td></td>
	   <td></td>
          </tr>
                </table>

table ：表格
tr : 行
td : 单元格
th : 表格的列标题

单元格的大小默认情况下是不固定的，会根据里面的内容的多少来显示。

1）width=“表格的宽度”
2）height=“表格的高度”
3）border=“表格的边框”
4）bordercolor=“边框色”
5）cellspacing=“单元格与单元格之间的间距”
6）cellpadding=“单元格与内容之间的距离"
7）align=“表格水平对齐方式”
取值：left、right、center、左右中
valign=“垂直对齐” top\bottom\middle 上下中
8）合并单元格属性：(td)
合并列： colspan=“所要合并的单元格的列数" 横向合并
合并行： rowspan=“所要合并单元格的行数” 纵向合并

7、表单

    作用：收集数据，收集用户信息；
   form    表单域     就是指放表单控件的区域     <form></form>
	form里可以嵌套其他的标签

    属性 ： 
	action = '接口地址'
	method = 'get / post'     'get / post'  的区别
	name = '表单名称'

<input type="">   空标记，添加表单控件的标签   
         属性：type="text"     文本框       
	               type="password"     密码框
                     type="submit"      提交按钮
                      type=“reset”   重置按钮
                       type=“button”   空按钮
                                     
	                   value=“”： 表单控件的默认值
        	     	  placeholder=“” 添加提示信息

前端技术学习教程

前端学习

测试学习之路

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5的基础认识

一、什么是网站网站（Website）是指在因特网上，根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合。简单地说，网站是一种通讯工具，就像布告栏一样，人们可以通过网站来发布自己想要公开的资讯，或者利用网站来提供相关的网络服务。人们可以通过网页浏览器来访问网站，获取自己需要的资讯或者享受网络服务。网站则由很多网页构建而成。网站的建站流程：二、什么是网页现在在你眼前，出...
复制链接

扫一扫