HTML

文档结构

<!DOCTYPE html>  文档声明

<html lang="en">  语言

<head>  网站配置信息

    <meta charset="UTF-8">  解码方式

    <title>皇家赌场</title>  网站标题

</head>

<body>   网站显示内容

    <h1>

        26期 皇家赌场

    </h1>

</body>

</html>

head标签

1. meta 文档字符编码

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>我的网页</title>

    </head>

    <body>

        <h1>叫爸爸</h1>

    </body>

</html>

标签写法分类

全封闭标签  <h1 xx='ss'>xxx</h1>

标签属性 :<h1 xx='ss'>xxx</h1>    xx:属性名  ss:属性值

自封闭标签  <meta charset="UTF-8">

1.2 meta 页面刷新

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>世上最牛逼的页面标题</title>

        <meta http-equiv="Refresh" content="5" />

    </head>

    <body>

        <h1>这是个栗子，快尼玛给我运行起来。</h1>

    </body>

</html>

1.3 meta 关键字

meta标签可以设置关键字，用于搜索引擎收录和关键字搜索。

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>世上最牛逼的页面标题</title>

        <meta name="keywords" content="欧美，日韩，国产，网红,直播" />

    </head>

    <body>

        <h1>这个栗子就别运行老子了，随便去看一个网站的源代码吧。</h1>

    </body>

</html>

1.4 meta 网站描述

meta标签可以设置网站描述信息，用于在搜索引擎搜索时，显示网站基本描述信息。

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>野鸭子</title>

        <meta name="keywords" content="欧美，日韩，国产，网红" />

        <meta name="description" content="野鸭子是一个面向全球的皮条平台。" />

    </head>

    <body>

        <h1>这个栗子就别运行老子了，随便去看一个网站的源代码吧。</h1>

    </body>

</html>

1.5 meta 触屏缩放

meta标签可以设置页面是否支持触屏缩放功能，其中各元素的含义如下：

width=device-width ，表示宽度按照设备屏幕的宽度。
initial-scale=1.0，初始显示缩放比例。
minimum-scale=0.5，最小缩放比例。
maximum-scale=1.0，最大缩放比例。
user-scalable=yes，是否支持可缩放比例（触屏缩放）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>标题标题标题标题</title>

    <!--支持触屏缩放-->

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">

    <!--不支触屏持缩放-->

    <!--<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">-->

</head>

<body>

    <h1 style="width: 1500px;background-color: green;">一起为爱鼓掌吧</h1>

</body>

</html>

1.6 link 图标

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>野鸭子</title>

		<link rel="icon" href="图标文件路径">

    </head>

    <body>

        <h1>隔壁王老汉的幸福生活</h1>

    </body>

</html>

简单head内部标签总结

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>野鸡平台</title>

    <meta name="keywords" content="欧美，日韩，国产，网红"/>

    <meta name="description" content="野鸡是一个面向全球的皮条平台。"/>

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">

    <link rel="icon" href="/image/chicken.icon">

</head>

<body>

    <h1 style="width: 1500px;background-color: green;">我们一起为爱鼓掌呀！！！</h1>

</body>

</html>

body标签

h1 - h6标签 ,标题标签

<body>

    <h1>李晨浩</h1>

    <h2>冯俊</h2>

    <h3>刘炳良,大圣</h3>

    <h4>王勇杰</h4>

    <h5>苑子萌</h5>

    <h6>李海煜</h6>

</body>

br标签换行

    <h1>李晨浩</h1><br>

    <h2>冯<br>俊</h2>

注意点:所有的回车空格等空白内容都被认为是一个空格

hr 标签一行横线

<h2>冯<hr>俊</h2>

body标签里面的没有其他标签包裹的内容,就是普通文本显示

<body>

    你好!!!

</body>

a 标签超链接标签

不加href属性,就是普通文本显示

<a>python短片</a>

加上href属性,不加值

<a href="">python短片</a>

文字有颜色效果,还有下划线,并且点击后会刷新当前的html页面

加上href属性,并且加上值

<a href="http://www.pythonav.com" target="_self">python短片</a>

跳转对应网址的页面

未访问之前是蓝色的字体颜色

访问之后是紫色的字体颜色

target属性:

	_self:在当前标签页打开 href属性值的那个网址

    _blank:在新的标签页打开 href属性值的那个网址

锚点

页面内容进行跳转

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="top">这是顶部</div>

<a href="#i1">第一章 初入贵境</a>

<a href="#i2">第二章 开局一人一条狗</a>

<a href="#i3">第三章 就是干</a>

<a href="#i4">第四章 大结局</a>

<div id="i1" style="background-color: red;">第一章 初入贵境</div>

<p>

    没干啥好事儿!!

</p>

<p>

    没干啥好事儿!!

</p>

<p>

    没干啥好事儿!!

</p>

<p>

    没干啥好事儿!!

</p>

<div id="i2" style="background-color: red;">第二章 开局一人一条狗</div>

<p>

    给狗洗澡!!

</p>

<p>

    给狗洗澡!!

</p>

<p>

    给狗洗澡!!

</p>

<p>

    给狗洗澡!!

</p>

<div id="i3" style="background-color: red;">第三章 就是干</div>

<p>

    干狗!!!

</p>

<p>

    干狗!!!

</p>

<p>

    干狗!!!

</p>

<p>

    干狗!!!

</p>

<p>

    干狗!!!

</p>

<div id="i4" style="background-color: red;">第四章 大结局</div>

<p>

    中毒身亡!!!

</p>

<p>

    中毒身亡!!!

</p>

<p>

    中毒身亡!!!

</p>

<p>

    中毒身亡!!!

</p>

<p>

    中毒身亡!!!

</p>

<p>

    中毒身亡!!!

</p>

<p>

    中毒身亡!!!

</p>

<p>

    中毒身亡!!!

</p>

<p>

    中毒身亡!!!

</p>

<p>

    中毒身亡!!!

</p>

<p>

    中毒身亡!!!

</p>

<p>

    中毒身亡!!!

</p>

<p>

    中毒身亡!!!

</p>

<p>

    中毒身亡!!!

</p>

<p>

    中毒身亡!!!

</p>

<p>

    中毒身亡!!!

</p>

<p>

    中毒身亡!!!

</p>

<a href="#top">返回顶部</a>

</body>

</html>

描述:标签设置id属性=值(xx),a标签href属性的值写法:href='#xx',点击这个a标签就能跳转到id属性为xx的那个标签所在位置.

<a name='a1'>xx</a>

<a href='#a1'>返回</a>

img标签图片标签

<!--<img src="图片网络地址或者本地图片地址" alt="">-->

<!--<img width="200" height="200" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572847825593&di=77d528287e8f7d62938cfd13888a2e7a&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180505%2Fd2613066757341c28cc6f19a0a4bfdba.jpeg" alt="">-->

<img width="200" height="200" src="timg.jpg" alt="这是一个美女图片,稍等片刻" title="子萌">

src属性:图片路径  必须写

alt属性:图片加载失败或者正在加载时提示的内容

title属性:鼠标悬浮时显示的内容

# 不常用,通过css来控制

width:设置宽度

height:设置高度

div标签和span标签

没有任何的文本修饰效果

标签分类

块级标签(行外标签):独占一行,h1-h6\p\br\hr\div\ul\li

	块级标签能够包含内联标签,和某些块级标签

内联标签(行内标签):不独占一行,img\a\span  只能包含内联标签,不能包含块级标签

列表标签 ul和ol标签

示例:

	兴趣爱好:

    <ul>

        <li>抽烟</li>

        <li>喝酒</li>

        <li>烫头</li>

    </ul>

    喜欢的姑娘:

    <ol type="I" start="2">

        <li>韩红</li>

        <li>贾玲</li>

        <li>李宇春</li>

    </ol>

 #dl标签了解

    <dl>

        <dt>河北省</dt>

        <dd>邯郸</dd>

        <dd>石家庄</dd>

        <dt>山西省</dt>

        <dd>太原</dd>

        <dd>平遥</dd>

    </dl>

table表格标签

<table border="1">

        <thead>

        <tr>

            <th>id</th>

            <th>name</th>

            <th>hobby</th>

        </tr>

        </thead>

        <tbody>

        <tr>

            <td>1</td>

            <td>李晨浩</td>

            <td>看电影</td>

        </tr>

        <tr>

            <td>2</td>

            <td>冯俊</td>

            <td>迟到</td>

        </tr>

        <tr>

            <td>3</td>

            <td>大圣</td>

            <td>玩棍儿</td>

        </tr>

        </tbody>

    </table>

表格合并(rowspan="2"纵行合并 colspan='2' :横列合并)

<table border="1">

        <thead>

        <tr>

            <th>id</th>

            <th>name</th>

            <th>hobby</th>

        </tr>

        </thead>

        <tbody>

        <tr>

            <td>1</td>

            <td>李晨浩</td>

            <!--<td rowspan="2">看电影</td>-->

            <td>看电影</td>

        </tr>

        <tr>

            <td>2</td>

            <td>冯俊</td>

            <td>迟到</td>

        </tr>

        <tr>

            <td>3</td>

            <td colspan="2">大圣</td>

            <!--<td>玩棍儿</td>-->

        </tr>

        </tbody>

    </table>

form标签表单标签

<form action="http://127.0.0.1:8001">

</form>

action属性: 指定提交路径,提交到哪里去

#form表单标签会将嵌套在form标签里面的输入框的数据全部提交到指定路径

input标签输入框

# input标签,如果要提交数据,别忘了写name属性  例如:name='username' -- username='zhangjianzhi'

<input type="text">   普通文本输入框

<input type="password"> 密文输入框

<input type="submit" value="登录">  提交按钮  触发form表单提交数据的动作

<input type="reset"> 重置按钮 清空输入的内容

<input type="button" value="注册"> 普通按钮  不会触发form表单提交数据的动作

<input type="date">  时间日期输入框

<input type="file">  文件选择框

<input type="number">  纯数字输入框

单选框

    性别

    <input type="radio" name="sex" value="1">男

    <input type="radio" name="sex" value="2">女

复选框(多选框)

    喜欢的明星:

    <input type="checkbox" name="hobby" value="1"> 波多

    <input type="checkbox" name="hobby" value="2"> 小泽

    <input type="checkbox" name="hobby" value="3"> 仓井

select下拉框标签

   <select name="city" id="city">

        <option value="1">北京</option>

        <option value="2">上海</option>

        <option value="3">深圳</option>

        <option value="4">惠州</option>

    </select>

    <select name="citys" id="citys" multiple>

        <option value="1">北京</option>

        <option value="2">上海</option>

        <option value="3">深圳</option>

        <option value="4">惠州</option>

    </select>

    multiple:多选的意思

textarea 多行文本输入框

<textarea name="comment" id="comment" cols="20" rows="10"></textarea>

HTML页面学习的更多相关文章

【JSTL EL】 jsp 页面学习
JSTL(JSP Standard Tag Library,JSP标准标签库)是一个不断完善的开放源代码的JSP标签库,是由apache的jakarta小组来维护的.JSTL只能运行在支持JSP1.2 ...
前端html页面学习---html部分
作为一个后台开发人员:本篇博客主要是关注前后台交互时需要掌握的html技术,不涉及css这一块的内容:主要是自学过程中的备忘 1:html常用标签标签的学习:不列出结束标签 <p>:段落: ...
jsp页面学习之"javascript:void(0)"的使用
javascript:void(0) 仅仅表示一个死链接如果是个# javascript:void(#),就会出现跳到顶部的情况,搜集了一下解决方法 1:<a href="####& ...
学习ASP.NET MVC(七)——我的第一个ASP.NET MVC 查询页面
在本篇文章中,我将添加一个新的查询页面(SearchIndex),可以按书籍的种类或名称来进行查询.这个新页面的网址是http://localhost:36878/Book/ SearchIndex. ...
学习ASP.NET Core Razor 编程系列五——Asp.Net Core Razor新建模板页面
学习ASP.NET Core Razor 编程系列目录学习ASP.NET Core Razor 编程系列一学习ASP.NET Core Razor 编程系列二——添加一个实体学习ASP.NET ...
学习ASP.NET Core Razor 编程系列七——修改列表页面
学习ASP.NET Core Razor 编程系列目录学习ASP.NET Core Razor 编程系列一学习ASP.NET Core Razor 编程系列二——添加一个实体学习ASP.NET ...
学习ASP.NET Core Razor 编程系列十二——在页面中增加校验
学习ASP.NET Core Razor 编程系列目录学习ASP.NET Core Razor 编程系列一学习ASP.NET Core Razor 编程系列二——添加一个实体学习ASP.NET ...
C#编译器优化那点事 c# 如果一个对象的值为null，那么它调用扩展方法时为甚么不报错 webAPI 控制器（Controller）太多怎么办？ .NET MVC项目设置包含Areas中的页面为默认启动页（五）Net Core使用静态文件学习ASP.NET Core Razor 编程系列八——并发处理
C#编译器优化那点事使用C#编写程序,给最终用户的程序,是需要使用release配置的,而release配置和debug配置,有一个关键区别,就是release的编译器优化默认是启用的.优化代码 ...
C#中的函数式编程：递归与纯函数（二）学习ASP.NET Core Razor 编程系列四——Asp.Net Core Razor列表模板页面
C#中的函数式编程:递归与纯函数(二) 在序言中,我们提到函数式编程的两大特征:无副作用.函数是第一公民.现在,我们先来深入第一个特征:无副作用. 无副作用是通过引用透明(Referential ...

随机推荐

谈谈：这次疫情对一个普通iOS开发者的影响！
“2019年已经很难了,2020年开局0-5那就更难了啊!”大家应该都很清楚,这次疫情对于国家的整体经济体系影响非常大,但是要说有多大,我也不了解,毕竟我只是个程序员!但是对iOS开发者影响有多大,我 ...
抖音快手短视频去水印API，接口开发文档
开发者官网:http://api.lingquan166.com/ 简介:根据抖音.微视.小红书.皮皮搞笑等APP中复制出来的链接,解析获取短视频的标题.封面.无水印短视频地址等信息. 接口地址: h ...
idea 编译报错 Build completed with 1 error and 0 warnings in 2 s 113 ms
settings里java compiler改成正确版本 project structure里同样如此
Page Object设计模式（一）
一.简介主要特点体现在“对界面交互细节的封装”上,使测试用例更专注于业务的操作,从而提高测试用例的可维护性.解决UI变动问题. page对象的一个基本原则经验法则是:凡是人能做的事,page对象通过 ...
NIO学习笔记，从Linux IO演化模型到Netty—— Java NIO零拷贝
同样只是大致上的认识. 其中,当使用transferFrom,transferTo的时候用的sendfile(). 如果系统内核不支持 sendfile,进一步执行 transferToTrusted ...
Django如何连接mysql
1.设置django的mysql驱动为pymysql 因为django默认的是使用MySqlDb连接mysql数据库,但是由于该模块不支持python3.4以上版本,所以使用pymysql模块在项目 ...
Java中顺序、并行与并发
顺序(sequential)用于表示多个操作依次处理.例如把十个操作交给一个人处理并行(parallel)用于表示多个操作同时处理.比如是个操作分给两个人操作,两个人会并行处理并发(concurr ...
ora.vip 1 ONLINE INTERMEDIAT
问题出现情景: 三节点12C rac某次扩存储,两个节点同时重启,其中一个节点 ora.rac1.vip 1 ONLINE INTERMEDIATE rac2 FAILED OVER 出现原因可能 ...
对于搭建网站中出现“You don't have permission to access this resource.”错误提示的解决思路
我是用的是树莓派搭载了ubuntu系统配置php+apache的网站环境,但在登陆网站进行网站初始化设置时出现错误提示,其大意是没有访问权限,上网搜索了一系列相关教程,都说明对apache2.con ...
Mac上的屏幕截图不起作用该如何修复？
屏幕截图是Mac提供的内置功能,很少有它不起作用.但是由于某些意外的设置或硬件问题,Mac上的屏幕截图有时无法正常工作,这里提供的是Mac上的屏幕截图不起作用该如何修复? 1.在Mac上启用屏幕快照快 ...

HTML页面学习