8.12 Python web前端 HTML认识

一、什么是HTML？

HTML指的是超文本标记语言（HyperText Markup Language）,HTML是用来描述网页的一种语言，HTML不是编程语言，而是一种标记语言，HTML使用标记来描述网页

1.HTML基本结构

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body></body>
</html>

<!DOCTYPE>声明必须在html文档的第一行，位于<html>标签之前

<html></html>标签限定了文档的开始点和结束点

<head>元素定义文档的头部，它是所有头部元素的容器

<body>body标签元素定义文档的主体，body元素包含文档的所有内容，比如文本、超链接、图像、表格、列表等。

<title>定义文档的标题

二、常用标签

1.标题标签

<h1>-<h6>标签可定义标题，<h1>定义最大的标题，<h6>定义最小的标题

2.段落标题

<p></p>p元素会自动在其前后创建一些空白。

3.字体标签

<i>、<em>将字体显示为斜体，两者显示效果一样，<em>则把文本定义为强调内容

<strong>、<b>将字体显示为粗体，显示效果一样，<strong>则把文本内容定义为语气更强的内容，用于浏览器搜索的关键字

<u>对文本加上下划线

4.换行标签

<br>强制换行

5.分区/节标签 <div>

<div>可定义文档中的分区和节，把文档分割为独立的、不同的部分。它作为严格的组织工具，没有任何格式与其关联

6.<span>

没有语义，没有固定格式表现，当对它应用样式时，它才会产生视觉上的变化。

7.无序列表标签

<ul>

8.有序列表标签

<ol>

9.列表项目标签

<li>标签用在<ul>和<ol>中

10.自定义列表标签

<dl>

<dt>定义列表项目

<dd>描述列表中的项目

11.转义

&lt小写 &gt大写 &nbsp空格 &copy版权符

12.注释

三、标签分类

1.块级标签

总是在新行上开始，占据一行，可以设置宽高，常见的块级标签：h1-h6，p，ul，ol，li，dl，hr

2.行内标签

默认从左到右在一行排列，无法设置宽高

常见行内标签：a，span

3.行内块标签

可以设置宽高

常见行内块标签：img，input

四、图片与超链接

1.<img>元素向网页中嵌入一张图片

alt：规定图像的替代文本

src：图片的URL

title：鼠标移入图像时的提示文本

2.超链接

<a>标签定义超链接

href指向链接目标

target:_blank在新窗口打开链接

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>标签</title>
</head>
<body><h1>h1</h1><h2>h2</h2><h3>h3</h3><h4>h4</h4><h5>h5</h5><h6>h6</h6><p><h3>啦啦啦</h3>一二三四,<br>二二三四,<br>三二三四,<br></p>&lt;hello&gt;&copy;空&nbsp;&nbsp;&nbsp;&nbsp;格<br>换行<i>斜体</i><em>斜体 浏览器强调</em><b>粗体</b><strong>粗体 浏览器关键字</strong><u>下划线</u><hr><!--水平线--><img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4006502875,985602266&fm=26&gp=0.jpg" alt="图片路径错误时显示alt" title="网络图片 鼠标在图片上是显示的内容"><img src="D:\360极速浏览器下载\9d3d90cd47033b34ab3e8ab928755b27.jpeg" title="本地图片"><!--../上一层目录./当前目录--><img src="./img/0.jpg" title="吃屎">
</body>
</html>

     <!--ul无序列表type 值有：disc默认实心圆circle  空心圆square  实心正方形--><ul type="square"><li>列表1</li><li>列表2</li><li>列表3</li></ul><!--ol 有序列表type 值有：1 数字 默认a 小写字母A 大写字母i 小写罗马数字I 大写罗马数字start 以第几个开始 默认1--><ol type="1" start=""><li>列表1</li><li>列表2</li><li>列表3</li></ol><!--dl 自定义列表dt 列表项标题dd 列表项说明--><dl><dt>列表1</dt><dd>列表1说明</dd><dt>列表2</dt><dd>列表2说明</dd></dl>

<a href="http://www.baidu.com" target:_blank title="提示信息">百度</a><!--锚点给指定标签添加id属性a标签的href属性值为 #指定元素ID属性的值--><a href="#1" id="top">跳转一楼</a><a href="#2">跳转二楼</a><a href="#3">跳转三楼</a><a href="#4">跳转四楼</a><a href="#5">跳转五楼</a><p id="1" style="height:300px;background-color:pink">一楼</p><p id="2" style="height:300px;background-color:orange">二楼</p><p id="3" style="height:300px;background-color:purple">三楼</p><p id="4" style="height:300px;background-color:red">四楼</p><p id="5" style="height:300px;background-color:blue">五楼<a href="#top">返回顶部</a>

<a href="./demo4.html">跳转demo4</a><a href="./demo4.html#5">跳转demo4的5楼</a>

五、表格

1.<table>定义HTML表格

tr：行

td、th：列

2.表格常用属性

border：边框厚度，比如border=“1”

cellspacing：设置表格和表格之间的距离

cellpadding：设置内容和表格之间的距离

align：水平对齐方式

left默认，center，right

valign：垂直对齐方式

lcenter默认，top，bottom

3.合并单元格

rowspan：合并行

colspan：合并列

<table border="1" cellspacing="0" width="600" height="300"><tr align="center"><td>编号</td><td align="left">姓名</td><td>年龄</td><td>简介</td><td>描述</td></tr><tr align="center"><td>1</td><td>吴昊</td><td rowspan="2">男</td><td>18</td><td colspan="2">貌似潘安</td><!-- <td>貌似潘安</td> --></tr><tr align="center"><td>1</td><td valign="top">王洋洋</td><!-- <td>男</td> --><td>26</td><td>暖水壶</td><td>暖男</td></tr></table>

六、表单

1.<form>标签用于为用户创建HTML表单域

表单域能够包含input元素，比如文本字段、复选框、单选框、提交按钮等

2.form属性：

action：规定当提交数据向何处发生数据

method：用于规定发送数据的方式

get：把数据在地址栏以明文形式发送，不安全，大小受浏览器限制

post：不会以明文的形式发送，理论上大小不受浏览器控制

3.常见表单元素

input：text文本字段，password密码字段，radio单选框，checkbox多选框，file选择文件按钮，submit提交按钮，imag图片按钮，reset重置按钮，button单纯的按钮，hidden隐藏域

select：option用来创建多选菜单

textarea：文本域

 <form action="数据提交的路径链接" >用户名<input type="text" name="username"><br>密码<input type="password" name="pwd"><br>性别<input type="radio" name="gender" value="1" checked>男<input type="radio" name="gender" value="0">女<br>爱好<input type="checkbox" name="hobbit" value="0">唱<input type="checkbox" name="hobbit" value="1">跳<input type="checkbox" name="hobbit" value="2">rap<br>地址<select name="address"><option value="0">北京</option><option value="1">上海</option><option value="2" selected>广州</option><option value="3">深圳</option></select><br>隐藏域<input type="hidden" name="uid" value="123"><br>文本域<textarea>默认文本</textarea><br><input type="submit" value="提交"><button>提交</button><br>单纯按钮<input type="button" name="按钮"><br>重置按钮<input type="reset" name="reset"></form>

8.12 Python web前端 HTML认识相关推荐

1+X Web前端等级考证 | 2020 12月Web前端开发中级实操 (模拟试题第一套) 附答案
由于经常分享失败,我上传github上了,先放上链接:https://github.com/Lydever/web-1-x.git 请礼貌,不要耍流氓哈哈,创作不易,下载的同时,请start一下,谢谢 ...
Python Web前端概述
Web前端概述说明:本文使用的部分插图来自Jon Duckett先生的*HTML and CSS: Design and Build Websites*一书,这是一本非常棒的前端入门书,有兴趣的读者 ...
python web前端开发面试_面试前端，听听别人怎么说！
分享一个人的面试经验: 一年半经验,百度.有赞.阿里面试总结前言人家都说,前端需要每年定期出来面面试,衡量一下自己当前的技术水平以及价值,本人17年7月份,毕业到现在都没出来试过,也没很想换工作, ...
python web前端 java ui学哪个好_学IT选Java还是Python？就业发展有何区别？
学IT选Java还是Python?就业发展有何区别? 来源:奇酷学院发表于:2018-09-27 10:14:35 想了解一个语言就业到底好不好,得先明确语言的发展方向. 很多学员在选择专业上遇着难 ...
python web前端后端页面详解
HTML DOM elements 集合: 第一栏:elements是基础元素:(网页源代码) 这几个参数都比较重要:在基础入门web的时候,判断出问题需要找这几个参数: elements.resou ...
1+X Web前端等级考证 | 2020 12月Web前端开发中级理论 (模拟试题第三套) 附答案
由于经常分享失败,我上传github上了,先放上链接:https://github.com/Lydever/web-1-x.git 请礼貌,不要耍流氓哈哈,创作不易,下载的同时,请start一下,谢谢 ...
Python Web前端实战案例——电商网站商品菜单导航栏
jQuery是一个快速.小巧.轻量级的.写的少.做的多.功能丰富的 JavaScript 库,是目前最流行的 JS 框架.利用它可以帮我们快速实现一些炫酷的效果. 目录 1 原理先知 2 思路概要 3 ...
1+X Web前端等级考证 | 2020 12月Web前端开发中级实操 (模拟试题第三套) 附答案
由于经常分享失败,我上传github上了,先放上链接:https://github.com/Lydever/web-1-x.git 请礼貌,不要耍流氓哈哈,创作不易,下载的同时,请start一下,谢谢 ...
8.14 Python Web前端 Css学习2
一.选择器优先级进阶 id选择器的优先级是100 class选择器的优先级是10 标签选择器的优先级是1 行间距优先级是1000 计算方式:让每个选择器对应的值相加,谁的值大谁的优先级高二.文本属性 ...

8.12 Python web前端 HTML认识

8.12 Python web前端 HTML认识相关推荐

最新文章

热门文章