HTML是什么意思?(2019-01-02)

2019-01-02  本文已影响0人  忆孤行

  HTML是一种超文本标记语言，即HTML（Hypertext Markup Language），是用于描述网页文档的一种标记语言。

“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

html 超文本标记语言
H Hyper
T text (超链接，图片，视频，音频等)
M markup(标记，标签)
L language

  HTML之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。所谓超级链接，就是一种URL指针，通过激活（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。

  HTML是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。

认识HTML语法

<!--文档生明头：告诉浏览器你要用h5标准来解析当前html文档-->
<!DOCTYPE html>
<!--class是类名，表示一类元素的名字，可以多个使用
id是身份标识,这个名字必须是唯一的，其他元素不能叫这个名字了
-->
<!--路径问题：
绝对路径：表示路径的完整描述信息
相对路径：根据相对位置得到的路径信息
/进入文件夹
/当前文件夹
../上一层文件夹
-->

记一些相对有意义的html语法

a链接

<a href="#targetId">锚点测试</a>
<div id="targetId">四大名著是中国文学史中的经典作品，是世界宝贵的文化遗产</div>
<!--
给a链接设置锚点，它就会跳去id名相同的地方
-->
<a href="http://www.baidu.com" target="_blank">打开一个新的网页</a>
<!--a链接的target标签
_blank
浏览器总在一个新打开、未命名的窗口中载入目标文档。

_self
这个目标的值对所有没有指定目标的 <a> 标签是默认目标，它使得目标文档载入并显示在相同的框架
或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 <base> 
标签中的 target 属性一起使用。

_parent
这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。
如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。

_top
这个目标使得文档载入包含这个超链接的窗口，
用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。

提示：这些 target 的所有 4 个值都以下划线开始。
任何其他用一个下划线作为开头的窗口或者目标都会被浏览器忽略，
因此，不要将下划线作为文档中定义的任何框架 name 或 id 的第一个字符。
-->

table中的一些属性

border  边框
cellspacing   单元格与单元格之间的间隙
cellpadding   内容到边框的距离
tr：行
td：列
rowspan 合并行
colspan 合并列
ul,li 无序列表
ol,li 有序列表
start 开始下标
type指定序列号类型  比如circle 空心圆
reversed 倒序

实体字符

实体字符(都是以&开头;结尾)
&gt; 大于
&lt; 小于
&nbsp;英文空格
&emsp;中文空格
&quot;引号("")
&amp;&号

form表单

form应用场景：登录/注册页面
form表单
  数据传输(可能是将本地数据传到后台,也有可能是从后台请求数据)
  action 指定服务器(后台/接收数据)地址
  method 指定通讯的方法(常用get/post/put/delete)

input属性
    name属性：指定向后台传值的手段(后台通过这个字段来获取用户输入)
    placeholder  空白内容时提示内容
    autofocus  自动聚焦
    autocomplete  自动提示之前提交的内容
    required 该字段是必填的否则无法提交
    disabled 禁用
    readonly 只读
    step 步幅multiple 设置多选

<form action="http://192.168.199.141:3000/test.js" method="post" enctype="multipart/form-data" >  <!--post可以用这个enctype="multipart/form-data"上传文件-->
    <div>
        姓名：<input type="text" name="userName" id="userName" value="" placeholder="请输入内容" autofocus required="required"/>
    </div>
    <div>
        密码：<input type="password" name="psw" id="" value="" />
    </div>
    <div>
    头像：<input type="file" name="avatar" accept="image/*" multiple/>  <!--accept设置选择什么文件-->
    </div>
<!--
type:number 并不是说，你只能输入数字，而是html会将内容尽量转化为数字
他在移动端是非常有意义的，例如电话号码输入框(弹出数字键盘)
-->
    <div>
        年龄：<input type="number" name="avatar" step="3"/>
    </div>
    <div>
        性别：<br />
        <label for="boy">男：<input id="boy" type="radio" name="gender" value="0"/></label>
        <label for="girl">女：</label>
        <input id="girl" type="radio" name="gender" value="1"/>
    </div>
    <div>
        爱好：<br />
        <label>电影：<input type="checkbox"/></label>
        <label>音乐：<input type="checkbox"/></label>
        <label>运动：<input type="checkbox"/></label>
    </div>
    <div>
        <input type="reset" value="重置" />
        <input type="submit" value="提交" />
    </div>
        </form>

<!--下拉框-->
<!--selected属性刚开始显示的option-->
<select name="city">
    <option value="0">北京市</option>
    <option value="1">上海市</option>
    <option selected="selected" value="2">广州市</option>
    <option value="3">深圳市</option>
</select>
<!--文本框-->
<!--resize: none;禁止拉伸文本框
cols列合并
rows行合并-->
<textarea style="resize: none;" name="" id="" cols="40" rows="10"></textarea>

audio标签

<!--
    loop：循环播放
    h5允许自定义标签
    prelosd 自动加载
-->
<audio loop="loop" controls>
<!--
    利用source解决音频兼容问题
-->
    source type="audio/mpeg" src="audio/七里香.mp3" />
    <source type="audio/ogg" src="audio/七里香.ogg"/>
</audio>
<!--<script type="text/javascript">
document.addEventListener("click",function(){
    alert("帅哥")
    document.querySelector("audio").play()
})
</script>-->

video标签

<!--
    width/height  设置自动宽高
    controls  显示控制台
    preload  设置预加载模式
    muted  静音
    poster  设置海报地址
    autoplay  自动播放
    三种视频格式
    MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器
        WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器
        Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器
        -->
<video width="800" height="" controls="controls" preload="auto" poster="img/小丑.jpg"
    <source src="audio/q.mp4" type="video/mp4"></source>
    <source src="myvideo.ogv" type="video/ogg"></source>
    <source src="myvideo.webm" type="video/webm"></source>
            当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a>
</video>

图片热区地图功能

1.img标签要写usermap属性，指定要使用的map
2.map标签要使用name属性
3.map中area的shape属性有三个值可选rect/circle/poly

<img src="img/小丑.jpg" usemap="#map1"/>
<map name="map1">
    矩形：<area shape="rect" coords="212,32,239,55" href="http://www.baidu.com" alt="" />
    多边形：<area shape="poly" coords="258,127,215,186,300,186" href="http://www.baidu.com" alt="" />
    圆形：<area shape="circle" coords="267,66,30" href="https://music.163.com/#/song?id=431096179&market=baiduqk" alt="" />
</map>

重要的meta标签

<!--设置页面编码-->
        <meta charset="UTF-8">
        <!--页面描述-->
        <meta name="description" content="这里的文字描述网站内容的"/>
        <!--设置页面关键字-->
        <meta name="keywords" content="HTML CSS JavaScript"/>
        <!--设置页面缓存方式-->
        <meta http-equiv="cache-control" content="no-cache" />
        <!--声明作者信息-->
        <meta name="author" content="guxing,2357966040@qq.com"/>
        <!--指定渲染引擎的类型和版本-->
        <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
        <!--移动端关闭电话号码识别-->
        <meta name="format-detection" content="telephone=no" />
        <!--关闭邮箱地址识别-->
        <meta name="format-detection" content="email=no" />
        <!--如果想同时关闭电话和邮箱识别，可以把它们写到一条 meta 内-->
        <meta name="format-detection" content="telephone=no,email=no" />
        <!--解决防盗链-->
        <meta name="referrer" content="never"/>
设置标签图标
        <link rel="shortcut icon" type="text/css" href="img/bitbug_favicon.ico"/>
        <title>meta标签</title>
上一篇下一篇

猜你喜欢

热点阅读