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页面学习

HTML

文档结构

head标签

1. meta 文档字符编码

标签写法分类

1.2 meta 页面刷新

1.3 meta 关键字

1.4 meta 网站描述

1.5 meta 触屏缩放

1.6 link 图标

简单head内部标签总结

body标签

h1 - h6标签 ,标题标签

br标签换行

hr 标签一行横线

a 标签超链接标签

img标签图片标签

div标签和span标签

标签分类

列表标签 ul和ol标签

table表格标签

form标签表单标签

input标签输入框

select下拉框标签

textarea 多行文本输入框

最新文章

热门文章

巴特西

HTML页面学习

HTML

文档结构

head标签

1. meta 文档字符编码

标签写法分类

1.2 meta 页面刷新

1.3 meta 关键字

1.4 meta 网站描述

1.5 meta 触屏缩放

1.6 link 图标

简单head内部标签总结

body标签

h1 - h6标签 ,标题标签

br标签 换行

hr 标签 一行横线

a 标签 超链接标签

img标签 图片标签

div标签和span标签

标签分类

列表标签 ul和ol标签

table表格标签

form标签 表单标签

input标签 输入框

select下拉框标签

textarea 多行文本输入框

最新文章

热门文章

br标签换行

hr 标签一行横线

a 标签超链接标签

img标签图片标签

form标签表单标签

input标签输入框