HTML入门

1.HTML

指的是超文本标记语言
HTML不是编程语言,是一种超文本标记语言
1.1.网页:HTML利用标签描述出来,然后通过浏览器解析展示给用户
总结:由图片,文字,文本,链接组成

2.常用浏览器

浏览器内核:读取网页内容,整理讯息,计算网页的显示方式并显示页面。
Chrome Blink内核 就是Webkit的分支

3.WEB标准(重点)

基本分为两类:第一种IE,一般就是政府网站或者BAT大厂才需要兼容
第二种就是其他的

由W3C组织和其他标准化组织指定的一系列标准的集合。
3.1让WEB发展前景更好、内容被更多的设备访问、更容易被搜索引擎搜索、降低网站流量费用

3.2WEB标准的构成
主要包括结构表现、和行为三个方面

WEB标准提出的最佳体验方案:结构、样式、行为相分离
人话:结构写到HTML文件中,表现写到CSS文件中,行为写到JavaScript文件中


HTML语言规范

1.双标签和单标签

1.2标签关系

包含关系和嵌套一样的说法
并列关系

开发工具VScode

1.新建文件
2.保存为HTML文件
3.快捷生成

!tab

开发工具!TAB总结

字符集(Character set)是多个字符的集合。

在标签中,"UTF-8"> 必须写

在HTML5当中不写闭合 / 也行。

HTML常用标签

排版标签

 根标签,最大的标签
网页头部显示内容
文档标题
标题标签

段落换行标签
水平线标签
换行标签
用来布局的,只能放一个 用来布局的,可以放好多个span 文字加粗标签,推荐使用strong 文字斜体标签,推荐使用em 文字加删除线显示,推荐del 文字加下划线显示,不赞成使用u

ctrl +回车 快速换行
shift+下建 直接复制这一行代码 下面这两行就是这样复制的

h1-h6 p div 单独占一整行块级元素
strong b em i ins u del s span 一行内显示多个元素 行内元素

 
    
这是头部,我是一个div标签一个人占一行
我是老王

这个里面可以加所有HTML5其他标签

图像标签

"图像URL" /> 该语法中src属性用于指定图像文件的路径和文件名

标记属性

alt =“”图像不能显示时的替换文本
title=“” 鼠标悬停图片上时显示的内容
width=“” 设置图像的宽度
height=“” 设置像素的高度
高和宽只需要设置一个就可以,会等比例缩放
border="" 设置图片边框 后面会使用css来做,这里只要记住这个单词就好了

    
    "#" alt="我是一张照片">
    
    "#" alt="没有照片时显示的文字" title="鼠标放上来就会显示这些文字">

图像标签和路径(重点)

相对路径:图片相对与HTML页面的位置
./ 和直接输入 xx.jpg时一样的 ./代表着当前的意思 并且会有提示
…/ 返回上一级

同级:"#" / >
上级:"image/#" />
"timg.gif" alt="">
    "文件夹名字/文件夹名/timg.jpg " alt="">
    "../" alt="">

链接标签
空连接有个注意事项
name只能放再a链接里面

"跳转目标">文本或图像

"demo.html"内部链接 

"#"> 空连接
1.空连接 用一个#的时候 点击链接 会回到顶部 有一个刷新的效果 
"javascript:;"> 空连接
最好写上javascript:; 这样不会跳转刷新


"网址"> "文件名" />  图像链接
"" target="_blank"> 文本或图像  默认是_self,_blank是在新窗口打开

注释标签

 快捷键ctrl+/ 或者 ctrl+shift+/

路径

相对路径:保存不同目录的网页引用同一个文件时,使用的路径不相同,为相对路径
从代码所在的这个文件出发,去寻找我们的目标文件的,而我们说的上下同级,就是图片位于HTML页面的位置
1.同一级路径:同一级路径,图片引用的时候,直接写图片的名字就可以了 
2.下一级路径:"images/timg.jpg" /> 需要"/"符号表示下一级路径
3.上一级路径:"../images/timg.gif"> 需要"../"
绝对路径:"网络图片网络地址或者电脑图片文件夹地址" /> 不推荐使用图片文件夹地址
电脑文件夹地址方向\是这个样子
而相对路径是/这个

锚点定位

通过创建锚点链接,能够快速定位到目标内容**,使用#id定位

1.id模式
"#id名称">链接的内容	

"id名称">需要目标内容

2.name模式
使用name属性只能针对a标签来定位,而对div等其他标签就不能起到定位作用。

"#name名称" 链接地址
"name名称" 需要链接的内容 > 
 锚点定位 链接中加上#号 标记可以用id或者name
    但是name不能放在块级元素(p hx div ul ol li)中

base标签

1.base可以设置整体链接的打开方式
2.base写到之间
3.把所有的连接都默认添加target="_blank"

"_blank">

pre标签 预格式化文本

这个标签里的文字,会按照我们书写的模式显示,不需要段落和换行标签了。但是,比较少用,因为不好整体控制。

        可以对空格和空行

           进行控制

特殊字符(理解)

不需要用 
用输入法的全角输入方法就可以了

只需要记住 空格 大于号 小于号就可以了,剩下的回来查阅
1.是以运算符&开头,以分号符;结尾
2.他们不是标签,而是符号。
HTML中不能使用小于号“<“和大于号”>”特殊字符,浏览器会将它们作为标签解析,若要显示正确,在HTML源代码中使用字符实体

空格符: ;
大于号:>;
小于号: <;

"#">more >;>;

你可能感兴趣的:(基础学习,html,html5,前端)