文章目录

前端
- 前端简介
- HTML
- - HTML概述
  - HTML的网络术语
  - HTML结构
  - body标签相关

前端

前端简介

HTML 结构标准：相当于人的骨架。HTML就是用来制作网页的。
css 表现标准：相当于人的衣服。css就是对网页进行美化的。
js(JavaScript) 行为标准：相当于人的动作。JS就是让网页动起来，具有生命力的

博客地址 :
前端初识
body标签详解

HTML

HTML概述

HTML全称HyperText Mackeup Language，翻译为超文本标记语言，它不是一种编程语言，是一种描述性的标记语言，用于描述超文本内容的显示方式。

超文本：音频，视频，图片称为超文本。
标记：<英文单词或者字母>称为标记，一个HTML页面都是由各种标记组成。

作用：HTML是负责描述文档语义的语言。

注意：HTML语言不是一个编程语言(有编译过程)，而是一个标记语言(没有编译过程)，HTML页面直接由浏览器解析执行。HTML是负责描述文档语义的语言,在html中，除了语义，其他什么都没有。

HTML的网络术语

网页：由各种标记组成的一个页面就叫网页。
主页(首页) : 一个网站的起始页面或者导航页面。
标记： 称为开始标记，称为结束标记，也叫标签。每个标签都规定好了特殊的含义。
元素：内容称为元素.
属性：给每一个标签所做的辅助信息。

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标签下划线
```
马俊强
```
马俊强
s和del 中划线
```
<s>张国程</s>
<del>张国程</del>
```
张国程
~~张国程~~
p标签(***)

只能放文本/图片/表单元素.
```
你是一个p
你是一个p啊
```
你是一个p

你是一个p啊
div标签(***)

块级标签,独占一行.页面排版时,当做容器使用.
```
<div>div标签</div>
```
div标签
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>

跳转到指定地址
跳转至锚点(name和id,注意一下)
跳转至顶部(#)
写静态页面是,建议给a加上 <a href="javascript:void(0);">

打开新页面
百度一下
跳至h3
跳至顶部
跳至aaa

点击1
点击2
点击3

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>
```
1. 张三，默认
2. 李四，默认
3. 赵五，默认

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> &lt;!&ndash; 横向 &ndash;&gt;--><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>

Python笔记_39_前端_HTML相关推荐

初学者python笔记（列表的食用方法）
本篇是关于可迭代对象中的列表一些相关使用方法的记录. 可迭代对象简单描述:可以被for循环执行的对象(字符串,列表,元组,字典-) input()方法接收的其实只是字符串 a = input(&quo ...
tkinter 笔记： radiobutton 选择按钮（莫烦python笔记）
1 主体框架还是那个主体框架 window = tk.Tk() window.title('my window') window.geometry('500x500') 2 设置tkinter的文字变 ...
tkinter 笔记：列表部件 listbox （莫烦python 笔记）
1 主体框架主体框架部分还是 import tkinter as tkwindow = tk.Tk() #创建窗口window.title('my window') #窗口标题window.geo ...
python笔记：生成器
元素按照某种算法推算出来,我们在循环的过程中不断推算出后续的元素不必创建完整的list,从而节省了大量的空间这种一边循环一遍计算的机制,称之为生成器generator 1 列表生成器把列表生成式 ...
python输出字体的大小_Toby的Python笔记 | 预备知识：安装openpyxl学做电子表格
Toby的Python笔记 | 预备知识:安装openpyxl学做电子表格 Python 需要创建和读取excel表里面的数据,需要用 openpyxl 这个包,今天安装好备用. 首先,进入C命令窗口 ...
c++ 冒泡排序_干货｜python笔记1-冒泡排序
面试的时候经常有面试官喜欢问如何进行冒泡排序?这个问题相信可以难倒一批的同学,本篇就详细讲解如何用python进行冒泡排序. 基本原理 01概念: 冒泡排序是一种交换排序,它的基本思想是:两两比较相邻 ...
python笔记-1（import导入、time/datetime/random/os/sys模块）
python笔记-6(import导入.time/datetime/random/os/sys模块) 一.了解模块导入的基本知识此部分此处不展开细说import导入,仅写几个点目前的认知即可.其它内 ...
python慕课笔记_MOOC python笔记(三) 序列容器：字符串、列表、元组
Python Python开发 Python语言 MOOC python笔记(三) 序列容器:字符串.列表.元组容器概念容器是Python中的重要概念,分为有序与无序. 有序容器也称为序列类型容器 ...
python笔记之Cmd模块
python笔记之Cmd模块 Cmd类型提供了一个创建命令行解析器的框架,默认情况下,它使用readline来进行交互式操作.命令行编辑和命令完成.使用cmd创建的命令行解释器循环读取输入的所有行并且 ...
Python笔记002-列表推导式
Python笔记002-列表推导式以下是我学习<流畅的Python>后的个人笔记,现在拿出来和大家共享,希望能帮到各位Python学习者. 首次发表于: 微信公众号:科技老丁哥,ID: ...

Python笔记_39_前端_HTML