前端从入门到入坟之HTML篇

个人理解,有的内容没有写·-·

1.网页的结构

网页是由三部分组成的

结构:网页的结构部分           HTML

表现:网页的样式(装饰)        CSS

行为:网页与用户的交互功能   JavaScript

除此以外,我们需要了解两个东西

web标准

    W3C:万维网联盟是web最有影响力的技术标准机构,是专门负责制定网络标准的,制定了结构和样式标准。

    ECMA:欧洲计算机制造商协会,制定了行为标准。

HTML和XHTML

    HTML5:超文本标记语言.HTML5就是HTML的第五个版本

    XHTML:是可扩展超文本标记语言,和HTML类似,不过语法上更严格

2.HTML语言的组成

H5 基本结构  分为两个 区域:

 head头部区域(描述区)

< meta :里的数据是供机器解读的,告诉机器该如何解析这个页面>

body主体区域(内容区) : 所有在网页中显示的内容

标签:

            写在尖角号< >里的第一个单词叫做标签。

            标签分为两类分别是单标签、双标签

                单标签:<标签 属性="属性值">

                双标签:<标签 属性="属性值" 属性="属性值">  </标签>

        属性:

            写在尖角号< >里的第一个单词后面的叫做属性。

            属性和属性值之间,用 = 连接, 属性值放在""

            如果一个标签存在多个属性的情况下  属性和属性之间 用 空格隔开。

3.文档声明类型 

<!DOCTYPE>声明位于文档中的最前面的位置,处于<html>之前

<!DOCTYPE>声明不是一个 HTML 标签;它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。

4.字符集

字符集是多个字符的集合,以便计算机能够识别和储存各种文字

在<head>便签内,可以通过<meta>便签中的charset属性来规定HTML文档应该使用哪种字符编

<meta charset="UTF-8"/ >

charset常用的值有:GB2312、BIG5、GBK和UTF-8,其中UTF-8也被称为万国码,基本包含了世界所有国家需要用到的字符

注意:上面的语法是必须要写的代码,否则可能引起乱码的情况。

5.注释标签

在<!--注释语句-->注释标签用来在源文档中插入注释。注释不会在浏览器中显示。

<!--注释语句-->

6.特殊字符 

7.文本标签

div和span标签

1.概念:没有语义,就是一个盒子,用来装内容的

2.div一行只能放一个, span一行可以放多个

文本标题标签: h1- h6

1.特点:有默认样式:文本会加粗、字号不一样

2.h1标签是比较特殊的:唯一性,在单独页面里面只能出现一次,放网站logo,增加页面权重

3.h2-h6:板块的标题、一段叙述性文本的标题。

4.需要注意的问题:h1 - h6不能互相嵌套,并且一个标题占一行

lang语言种类

1.en定义语言为荚文

2.Zn-CN定义语言种类为中文

段落和换行标签

<p><p/>

1.P标签是不能进行相互嵌套

2.p标签里面不能嵌套h1- h6

<br/>

1.强制换行

2.是个单标签,只是简单的开始新的一行

文本格式化标签

1.文本的加粗和文本的倾斜

加粗<b><b/> <strong>这个是语义化的<strong/>

倾斜<i><i/> <em>这个是语义化的<em/>

2.下划线、水平线、删除线

下划线<u><u/>

水平线<hr>

删除线<s><s/> <del>这个是语义化的<del/>

 8.图像标签

图像标签的概念

在<img>图像标签是一个单标签,用来定义页面的图像。

<img src="url" alt="some_text">

src是图像标签的必须属性,他用来指定图像的路径和文件名

图像标签的其他属性


 

图像标签的注意点

图像标签可以拥有多个属性,必须标在标签名的后面

属性之间不分先后顺序,标签名与属性、属性与属性之间均由空格隔开属性采用键值对的格式,即key="value"的格式,属性="属性值"

alt属性的作用

1.文本替换图片(当图片加载不出来,显示alt里面的文字)

⒉.搜索引擎检查不到图片里面的文本,会查找alt里面的文字(seo优化)

9.网页路径

路径之绝对路径

绝对路径是指目录下单绝对位置,直接到达目标位置,通常是从盘符开始的路径

例如:"D\Web\img\ 1.png"或者"http:/ / www.example.com/index.htm"

路径之相对路径

相对路径是以引用文件所在位置为参考基础,而建立出的目录路径

这里简单来说就是相对于html的位置


 

这里我们说的上一级、下一级和同一级就是图片相对于html页面的位置。

目录文件夹和根目录

目录文件夹就是普通文件央,里面存放了图片视频等

打开目录文件夹的第一层就是根目录

9.超链接标签

a标签的属性

href = "url”作用:跳转地址。

<a href = "#id"></a>空链接,在当前页面进行跳转

<a href = "#"></a>空链接,不会跳转(用来模拟一个按钮)

<a href = "JavaScript:void(O)"></a>

target = ""

属性值

_self 默认值:在当前窗口打开

_blank新建一个窗口打开目标地址

title = ""

属性:做提示用的。(不仅仅使用在a上面,大部分标签都支持)

超链接默认的样式:文字为蓝色,有下划线,点击后变成紫色

10.表格标签

表格的作用就是显示数据

table

tr行

td列

表格的属性:

width =""宽(table上面添加改变整个表格的宽度,td上添加美一列的宽)

height =""高

border ="添加边框

border-color ="边框颜色

cellpadding =""内容距离边框的间距

cellspacing =""边框与边框之间的间距

align =""水平对齐方式属性值:left right center

valign =""垂直对齐方式属性值:top bottom middle

单元格的合并

只要跨行:都是合并行,如果么有跨列:都是合并列

行合并:rowspan="合并单元格的数量”

列合并:colspan = "合并单元格的数量”

注意:无论合并行还是合并列都是给td添加属性,和谁合并就删除谁

11.无序列表

无序列表是一个项目的列袭,此列项目使用粗体圆点(典型的小黑圆图)进行标记。

无序列表使用<ul>标签

<ul>
        <li>列表1</li>

        <li>列表2</li>

        <li>列表不</li>

</ul>

注意点

<ul></ul>中间只能嵌套<lix</li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不允许的

<li></li>之间相当于一个容器,可以容纳所有元素。

有序列表会带有自己的样式属性,但在实际使用时,我们会使用CSS来设置。

12.H5新增加标签

    语义化结构标签:

        section(晒可森)    类似于div,section 更偏向划分区域    

        article (奥特扣)   更偏向于 内容的展示

        aside  (饿塞得)    (在一边的,在一旁的,侧边)

        header     表示内容的头部、网页的头部、头部区域

        footer     表示网页的底部、内容的底部、底部区域

        nav         导航连接、导航区域

        figure  (飞鸽)   表示一块独立的内容

        figcaption  figure的标题(一般放在figure的第一位或者最后一位)

        main       主体内容(IE不兼容)

        hgroup

        mark (骂可)      高亮显示  默认北京为黄色(可以更改背景  内联元素)

        time        放时间的

        dialog (待唠嗑)     类似于微信的对话框  ( 默认display:none  默认定位  默认边框 )

    video  视频

        - src属性:资源路径

        - controls属性:如果出现该属性,则向用户显示控件,比如播放按钮。

        - autoplay属性:如果出现该属性,则视频在就绪后马上播放。

        - loop属性:重复播放属性。

        - muted属性:静音属性。

        - poster属性:规定视频正在下载时显示的图像,直到用户点击播放按钮      

    audio  音频

        - src属性:资源路径

        - controls属性:如果出现该属性,则向用户显示控件,比如播放按钮。

        - autoplay属性:如果出现该属性,则视频在就绪后马上播放。

        - loop属性:重复播放属性。

        - muted属性:静音属性。

    source标签:定义媒介资源

        type属性:

            视频:

                用于视频:video/ogg   video/mp4     video/webm

            音频:

                用于音频:audio/ogg   audio/mpeg

                        也支持  wav

13.H5新增加的表单

    新增type类型

        Type=“email”   限制用户必须输入email类型

        Type=“url”        限制用户必须输入url类型

        Type=“range”   产生一个滑动条表单

        Type=“number”

        Type=“search”   产生一个搜索意义的表单

        Type=“color”     生成一个颜色选择的表单

    下面五个有兼容问题

        Type=“time”      限制用户必须输入时间类型

        Type=“month”        限制用户必须输入月类型

        Type=“week”        限制用户必须输入周类型

        Type=“datetime-local”        选取本地时间

        type=”date”

    新增表单属性

        required     监测是否为空。

        min      最小

        max      最大

        step     步幅  确定一个法定值。 -3 0 3 6 9

        autocomplete    是否自动提示信息    属性值   on    off

        placeholder    文本框的提示信息

        autofocus      自动聚焦。一个页面只能由一个。

        pattern    后面的属性值是一个正则表达式。  

                        //手机号验证pattern="^1[3|5|8|7]\d{9}$"

        novalidate     取消验证

        multiple     选择(上传)多个文件

        list     必须结合datalist标签,绑定datalist  id名称。

    H5增加的表单标签

        <datalist></datalist>

            给绑定id的list属性的元素,做提示信息的。

        <output></output>

            计算结果的输出,脚本的输出


 

  • 6
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值