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 标签 超链接标签

  1. 不加href属性,就是普通文本显示
<a>python短片</a>
  1. 加上href属性,不加值
<a href="">python短片</a>

文字有颜色效果,还有下划线,并且点击后会刷新当前的html页面
  1. 加上href属性,并且加上值
<a href="http://www.pythonav.com" target="_self">python短片</a>

跳转对应网址的页面

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

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

target属性:

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

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

  1. 锚点

    页面内容进行跳转

<!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页面学习的更多相关文章

  1. 【JSTL EL】 jsp 页面学习

    JSTL(JSP Standard Tag Library,JSP标准标签库)是一个不断完善的开放源代码的JSP标签库,是由apache的jakarta小组来维护的.JSTL只能运行在支持JSP1.2 ...

  2. 前端html页面学习---html部分

    作为一个后台开发人员:本篇博客主要是关注前后台交互时需要掌握的html技术,不涉及css这一块的内容:主要是自学过程中的备忘 1:html常用标签标签的学习:不列出结束标签 <p>:段落: ...

  3. jsp页面学习之"javascript:void(0)"的使用

    javascript:void(0) 仅仅表示一个死链接 如果是个# javascript:void(#),就会出现跳到顶部的情况,搜集了一下解决方法 1:<a href="####& ...

  4. 学习ASP.NET MVC(七)——我的第一个ASP.NET MVC 查询页面

    在本篇文章中,我将添加一个新的查询页面(SearchIndex),可以按书籍的种类或名称来进行查询.这个新页面的网址是http://localhost:36878/Book/ SearchIndex. ...

  5. 学习ASP.NET Core Razor 编程系列五——Asp.Net Core Razor新建模板页面

    学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET ...

  6. 学习ASP.NET Core Razor 编程系列七——修改列表页面

    学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET ...

  7. 学习ASP.NET Core Razor 编程系列十二——在页面中增加校验

    学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET ...

  8. C#编译器优化那点事 c# 如果一个对象的值为null，那么它调用扩展方法时为甚么不报错 webAPI 控制器（Controller）太多怎么办？ .NET MVC项目设置包含Areas中的页面为默认启动页 （五）Net Core使用静态文件 学习ASP.NET Core Razor 编程系列八——并发处理

    C#编译器优化那点事   使用C#编写程序,给最终用户的程序,是需要使用release配置的,而release配置和debug配置,有一个关键区别,就是release的编译器优化默认是启用的.优化代码 ...

  9. C#中的函数式编程：递归与纯函数（二） 学习ASP.NET Core Razor 编程系列四——Asp.Net Core Razor列表模板页面

    C#中的函数式编程:递归与纯函数(二)   在序言中,我们提到函数式编程的两大特征:无副作用.函数是第一公民.现在,我们先来深入第一个特征:无副作用. 无副作用是通过引用透明(Referential ...

随机推荐

  1. Integer使用==做判断遇到的问题

    问题: 最近使用Integer类型的数据做判断时,遇到了一个神奇的问题. 如: Integer a=223; Integer b=223; 这样使用==做判断,得到的结果是 false 原因: 后来查 ...

  2. springcloud服务已经关闭但是Eureka显示服务状态一直为UP

    问题: 最近遇到一个很奇怪的问题,就是使用springcloud的时候,服务明明已经停止,但是在eureka中一直显示此服务状态为UP,这样就导致了请求再次过来的时候被分发到已经停止的服务上,其实这是 ...

  3. 出现ImportError: Python is not installed as a framework. The Mac OS X backend will not be able to function correctly ....的解决方法

    在terminal上运行gluoncv时遇到了一个报错问题. ImportError: Python is not installed as a framework. The Mac OS X bac ...

  4. Q函数和值函数

    Q函数:奖励和 总奖励是在状态st采取行为at的奖励的期望和 值函数:奖励和 总奖励是在状态st下获得的奖励的期望和 下面是值函数另外的定义,在at行为下采取策略的Q函数的期望 是RL的目标函数,我理 ...

  5. [SDOI2018]反回文串

    题意 问有多少个长度为\(N\)且字符集大小为\(K\)的字符串可以通过回文串旋转 (把第一个字符移到最后)若干次得到.\(K\le N≤10^{18}\) 做法 ARC64F的加强版 设\(h(d) ...

  6. Qt的QString，QByteArray，char *相互转换

    1.QString转换为QByteArray QString str = "; QByteArray byte = str.toUtf8(); // 转换为Utf8格式 byte.toLoc ...

  7. mybatis_day01

    Mybatis01 1.什么是mybatis 1.1mybatis 一个基于Java的持久层框架 1.2持久层 操作数据库那层代码 项目分层: 界面层(jps/controller) 业务层(serv ...

  8. 如何将旧Mac的数据迁移到新的MacBook Pro？

    最新版的MacBook Pro已经上市,具有超凡魅力的Touch Bar开创了一个新时代.苗条的设计和华丽的显示效果也起到了推动运动的作用……!将数据从旧Mac传输到新Mac不再是一件漫长的事.您只需 ...

  9. Just a Hook HDU - 1698Just a Hook HDU - 1698 线段树区间替换

    #include<cstdio> #include<cstring> #include<iostream> #include<algorithm> us ...

  10. 修改sudoers

    使用visudo命令 [root@898f990a8808 etc]# visudo