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 当工作区的所有文件都提交到仓库,并和仓库保持一致时有修改的文件时,会显示有改动的文件,并提示如何提交这些修改添加到暂存区,还未提交到仓库时 ...
SpringBoot安全管理--（一）SpringSecurity基本配置
简介: Spring Boot针对Spring Security提供了自动化配置方案,因此可以使Spring Security非常容易地整合进Spring Boot项目中,这也是在Spring Boo ...
Java基础之三、类的特性和接口
类的派生.多态.抽象类.接口 1:派生-extends 派生就是继承已有类非私有的字段和方法等创建新的类,还可以添加.重写字段和方法: 在类的派生中,构造函数不可以被继承: 派生源的类-父类/基类/超 ...
Integer使用==做判断遇到的问题
问题: 最近使用Integer类型的数据做判断时,遇到了一个神奇的问题. 如: Integer a=223; Integer b=223; 这样使用==做判断,得到的结果是 false 原因: 后来查 ...
Git 尝试
1,下载Git 2,安装GIt 3,config : git config --global user.name "mxb" git config --global user.em ...
webApi前端ajax调用后端返回{"readyState":0,"status":0,"statusText":"error"}解决方案
var url = data.url, params = data.params, try_times = data.try_times , async = data.sync == 'false' ...
Python之lambda表达式的妙用
用法 Python的lambda表达式用于构建匿名函数,基本语法是在冒号左边放原函数的参数,可以有多个参数,用逗号隔开即可:冒号右边是返回值. >>> lambda x,y: (x+ ...
Codeforces Round #622（Div 2）C2. Skyscrapers (hard version)
题目链接 : C2. Skyscrapers (hard version) 题目描述 : 与上一道题类似,只是数据范围变大, 5e5, 如果用我们原来的方法,铁定是超时的. 考察点 : 单调栈,贪心, ...
使用opencv自带Tracker进行目标跟踪——重新设定跟踪目标
当希望重新设定一个目标进行跟踪的时候,以下两种做法都是无效的: 1.将新对象的Rect2d直接传递给update()函数: 2.再次使用tracker的init()函数. 解决办法:重新创建一个Tra ...
babel环境安装与编译
babel:将浏览器不支持的ES6语法转为javascript 查看node是否安装: npm -v node -v 实例演示:在桌面新建part5目录在cmd命令行中 cd desktop cd p ...

HTML页面学习