老男孩Python笔记_39
作者:互联网
文章目录
前端
前端简介
-
HTML 结构标准:相当于人的骨架。HTML就是用来制作网页的。
-
css 表现标准: 相当于人的衣服。css就是对网页进行美化的。
-
js(JavaScript) 行为标准: 相当于人的动作。JS就是让网页动起来,具有生命力的
HTML
HTML概述
HTML全称HyperText Mackeup Language,翻译为超文本标记语言,它不是一种编程语言,是一种描述性的标记语言,用于描述超文本内容的显示方式。
-
超文本:音频,视频,图片称为超文本。
-
标记 :
<英文单词或者字母>
称为标记,一个HTML页面都是由各种标记组成。
作用:HTML是负责描述文档语义的语言。
注意:HTML语言不是一个编程语言(有编译过程),而是一个标记语言(没有编译过程),HTML页面直接由浏览器解析执行。HTML是负责描述文档语义的语言,在html中,除了语义,其他什么都没有。
HTML的网络术语
- 网页 :由各种标记组成的一个页面就叫网页。
- 主页(首页) : 一个网站的起始页面或者导航页面。
- 标记:
<p>
称为开始标记 ,</p>
称为结束标记,也叫标签。每个标签都规定好了特殊的含义。 - 元素:
<p>
内容</p>
称为元素. - 属性:给每一个标签所做的辅助信息。
HTML结构
- 文档声明头
任何一个标准的HTML页面,第一行一定是一个以<!DOCTYPE ...>
开头的这一行,就是文档声明头,DocType Declaration,简称DTD。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。 - html标签
此元素可告知浏览器其自身是一个 HTML 文档。 - head标签(网站的配置信息)
<head>
标签用于定义文档的头部,它是所有头部元素的容器。<head>
中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。 一定要有title标签。 - body标签
<body>
元素定义文档的主体。
<body>
元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 双闭合标签 -->
<div>Hello World</div>
<!-- 单闭合标签 -->
<hr />
</body>
</html>
body标签相关
-
标题标签
h
系列(***)<h1>1小伙子,加油干!</h1> <h2>2小伙子,加油干!</h2> <h3 id="title-h3">3小伙子,加油干!</h3> <!--<a name="aaa" href="">dfsdfsdf</a>--> <p name="aaa">dfsdfsdf</p> <!-- 设置锚点,name属性只能给a标签设 --> <h4>4小伙子,加油干!</h4> <h5>5小伙子,加油干!</h5> <h6>6小伙子,加油干!</h6> <h7>7小伙子,加油干!</h7><!--注意:这个是没有的-->
1小伙子,加油干!
2小伙子,加油干!
3小伙子,加油干!
dfsdfsdf
4小伙子,加油干!
5小伙子,加油干!
6小伙子,加油干!
7小伙子,加油干! -
b
标签加粗<b>马俊强</b>马俊强 <strong>张国程</strong>
马俊强马俊强
张国程 -
u
标签 下划线<u>马俊强</u>
马俊强
-
s
和del
中划线<s>张国程</s> <del>张国程</del>
张国程
张国程 -
p
标签(***)只能放文本/图片/表单元素.
<p>你是一个p</p> <p>你是一个p啊</p>
你是一个p
你是一个p啊
-
div
标签(***)块级标签,独占一行.页面排版时,当做容器使用.
div标签<div>div标签</div>
-
span
标签(***)内联标签,作为页面提示信息使用.
<span>span标签但对方水电费水电费</span>
span标签但对方水电费水电费
-
pre
标签定义预格式化的文本
<p> 戏张先 —— 苏轼 十八新娘八十郎,苍苍白发对红妆。 鸳鸯被里成双夜,一树梨花压海棠。</p> <p>戏张先</p> <pre> 戏张先 —— 苏轼 十八新娘八十郎,苍苍白发对红妆。 鸳鸯被里成双夜,一树梨花压海棠。 </pre>
戏张先
—— 苏轼
十八新娘八十郎,苍苍白发对红妆。
鸳鸯被里成双夜,一树梨花压海棠。戏张先
戏张先 —— 苏轼 十八新娘八十郎,苍苍白发对红妆。 鸳鸯被里成双夜,一树梨花压海棠。
-
a
标签(***)文本级标签<a href="html初识.html">打开新页面</a> <a href="http://www.baidu.com">百度一下</a> <a href="#title-h3">跳至h3</a> <a href="#">跳至顶部</a> <a href="#aaa">跳至aaa</a> <a href="javascript:alert('michael');" title="弹出框">点击1</a> <a href="javascript:void(0);">点击2</a> <a href="javascript:;">点击3</a>
-
img
标签(***)<img src="111.jpg" alt="走丢了" width="" height="100" title="杨幂"> <img src="111.jpg" alt="走丢了" width="" height="300" title="杨幂"> <img src="111.jpg" alt="走丢了" width="" height="500" title="杨幂">
src
图片的地址(url,绝对路径,相对路径)- 宽和高,只设置一个时,会按照图片的原始比例,进行缩放.
title
鼠标悬浮时,显示的提示性的文本.alt
图片加载失败时,提示信息.提高用户的体验度.a
标签可以包裹img,点击img时,进行跳转.- 高矮不齐,底边对齐
-
ul
标签(***)<ul> <li>张三</li> <li>李四</li> <li>赵五</li> </ul> <ul> <li><b>北京</b> <ul> <li>朝阳区</li> <li>东城区</li> <li>西城区</li> </ul> </li> </ul> <ul> <li><b>广东</b> <ul> <li>广州市</li> <li>佛山市</li> <li>深圳市</li> </ul> </li> </ul>
无序列表li
标签,不能单独使用.容器级标签.一般会结合css,进行页面排版.
-
ol
标签有序列表
设置
type
,自定制序号.配合
li
标签.<ol> <li>张三,默认</li> <li>李四,默认</li> <li>赵五,默认</li> </ol>
- 张三,默认
- 李四,默认
- 赵五,默认
-
dl
标签定义列表
dt
标签,顶头显示.dd
标签,在左侧有缩进<dl> <dt>第一条规则</dt> <dd>不准睡觉</dd> <dd>不准交头接耳</dd> <dd>不准下神</dd> <dt>第二条规则</dt> <dd>可以泡妞</dd> <dd>可以找妹子</dd> <dd>可以看mv</dd> </dl>
- 第一条规则
- 不准睡觉
- 不准交头接耳
- 不准下神
- 第二条规则
- 可以泡妞
- 可以找妹子
- 可以看mv
-
table
标签(***)tr
标签,行td
标签,列th
标签,列(td
+b
)thead
标签,表头tbody
标签,表内容tfoot
标签,表页脚.<table border="1" style="border-collapse:collapse;"> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> <td><b>地区</b></td> <!-- th相当于td+b --> </tr> <tr> <td>波波</td> <td>22</td> <td>女</td> <td rowspan="3">东瀛</td> </tr> <tr> <td>小岳岳</td> <td>45</td> <td>男</td> <!-- <td>河南</td>--> </tr> <tr> <td>邓紫棋</td> <td>23</td> <!-- <td colspan="2">女</td> <!– 横向 –>--> <td>女</td> <!-- <td>香港</td>--> </tr> </table>
姓名 年龄 性别 地区 波波 22 女 东瀛 小岳岳 45 男 邓紫棋 23 女 合并单元格:
- 纵向合并
rowspan
- 横向合并
colspan
- 纵向合并
-
form
表单(***)属性:
action
数据提交的服务器地址method
数据提交的方式,默认get,指定post,当你写错的时候,还是按照get
input
标签type
:-
text
, 默认,文本,用于输入用户名等信息(***) -
password
, 用于用户密文输入密码(***) -
radio
, 单选框,必须name值一致.(***) -
CheckBox
, 复选框,(***) -
button
, 普通按钮,配合js使用(***) -
submit
, 提交按钮.(***) -
reset
, 重置form表单内的内容 -
file
, 上传文件(***) -
hidden
, 隐藏的input标签,默认选中,
checked
select
标签(***)name
是提交过去的key
,option
的value
属性是提交过去的值.
option
标签value
属性,- 默认选中,
selected
textarea
标签- 多行文本输入框
label
标签(***)-
提高用户的体验度
-
for
属性,必须制定的对方的id
值.
<hr> <h3>用户注册</h3> <form action="http://127.0.0.1:8899" method="get"> <p><label for="username">用户名:</label><input type="text" name="username" id="username"></p> <p>密码:<input type="password" name="pwd"></p> <p>性别: <input type="radio" name="sex" value="male" checked> 男 <input type="radio" name="sex" value="female"> 女 <input type="radio" name="sex" value="secret"> 保密 </p> <p>爱好: <input id="chui" type="checkbox" name="hobby" value="chui"> <label for="chui">吹管乐</label> <input type="checkbox" name="hobby" value="la"> 拉二胡 <input type="checkbox" name="hobby" value="tan"> 弹吉他 <input type="checkbox" name="hobby" value="chang"> 唱歌 </p> <p> 学历: <select name="xueli" id="sel1" size="3" multiple> <option value="g">高中</option> <option value="d">大专</option> <option value="b" selected>本科</option> <option value="s">硕士</option> </select> </p> <p>个性签名: <textarea name="" id="" cols="30" rows="10"></textarea> </p> <input type="hidden" value="sdfsdfsdf"> <input type="reset"> <input type="file"> <input type="submit" value='注册'> </form> <button>按钮</button>
标签:39,Python,标签,笔记,小伙子,HTML,文档,默认,加油 来源: https://blog.csdn.net/wangjunwen1017/article/details/93104877