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 ...

随机推荐

Git的基本使用 -- 文件的添加、撤销、对比、删除
显示当前工作区.暂存区.仓库的状态 git status 当工作区的所有文件都提交到仓库,并和仓库保持一致时有修改的文件时,会显示有改动的文件,并提示如何提交这些修改添加到暂存区,还未提交到仓库时 ...
linux - top与ps间的区别
背景在linux系统中提供了2个查询系统负荷值的命令,一个是 ps -o THREAD 一个是 top ,这两个命令都能够查询当前进程的CPU使用率情况,但是所代表的含义确实不一样的,ps -o T ...
笔记-Git基础
git配置 git config --global user.name "xxx" //配置用户名 git config --global user.email "xxx ...
BUUCTF 部分wp
目录 Buuctf crypto 0x01传感器提示是曼联,猜测为曼彻斯特密码 wp:https://www.xmsec.cc/manchester-encode/ cipher: 55555555 ...
安装NTP到CentOS（YUM）
运行环境系统版本:CentOS Linux release 7.3.1611 (Core) 软件版本:Docker 17.12.1-ce 硬件要求:无安装过程 1.安装YUM-EPEL存储库 YU ...
P1832题解 A+B Problem（再升级）
万能的打表既然说到素数,必须先打素数表筛出素数, 每个素数可以无限取,这就是完全背包了. 这次打个质数表: bool b[1001]={1,1,0,0,1,0,1,0,1,1,1,0,1,0,1,1 ...
剑指offer-面试题56_1-数组中只出现一次的两个数字-位运算
/* 题目: 求数组A中只出现一次的数字,该数组中有2个数字a.b仅出现一次,其余均出现两次 */ /* 思路: 两个相同的数字异或为0. 遍历数组,得到数组中各数字异或后的结果x,结果x=a^b. ...
navicate 连接mysql8.0，个人踩坑问题汇总
navicate 连接mysql8.0,个人踩坑问题汇总本文目录:1:安装mysql8.0新增全新验证方式,安装如果不修改mysql连接不上2:mysql启动命令问题3:navicate 运程连接My ...
C++->10.3.5.从键盘上输入职工的编号，从职工信息文件中查找该职工资料，查找成功时显示职工姓名、电话号码，邮政编码和地址。
p=getchar(); } printf("\n"); rewind(in); //文件流指针移到文件开始位置 p=fgetc(in); while(!feof ...
【daily】日常所遇 - 页面A嵌套页面B
因为懒,所以直接在http://www.runoob.com写demo测试了. (1)iframe嵌套虽然可能到现在这中方式都很常用,但是你baidu/google一下会发现.很多人都并不提倡用if ...

HTML页面学习