HTML

HTML简介

超文本标记语言

HTML就是书写网页的一套标准，我们浏览器看到的所有网站页面，内部其实都是HTML代码。

注释: 注释是代码之母




由于HTML代码非常的杂乱无章并且很多，所以我们我们习惯于用注释来划定区域方便后续的查找
eg：

导航条所有的html代码


ps:文件的后缀名其实给用户看的，只不过对应不同的文件后缀名有不同的软件来处理并添加很多功能

注意：
1. HTML代码是没有格式的，可以全部写在一行都没有问题，只不过我们习惯后了缩进来表示代码

2. 两种打开HTML文件的方式：
    1.找到文件所在的位置右键选择浏览器打开；
    2.在pycharm内部，集成了自动调用浏览器的功能，直接点击即可（前提是你的电脑上安装了对应的浏览器） 直接全部使用谷歌浏览器

3. 在pycharm中 书写HTML代码的时候，你只需要写标签名，然后tab就能自动补全

HTML文档结构

 标签

      :head标签不是给用户看的，而是定义一些配置主要给浏览器看的
      :body标签 写什么浏览器就渲染什么，用户就能看到什么


ps:  标签
     声明必须是 HTML 文档的第一行，位于  标签之前。
     声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

标签具有的两个重要属性

1.id值
    定义标签的唯一ID，HTML文档树中唯一
2.class
    为html元素定义一个或多个类名（classname）(CSS样式类名) （该值有点类似于面向对象里面的继承，一个标签可以继承多个class值）
3.style
    规定元素的行内样式（CSS样式）

ps: 标签既可以有默认的属性，也可以自定义属性

标签的分类1

1. 双标签 （有开始和结尾的双标签）
    eg:和  第一个标签是开始，第二个标签是结束。结束标签会有斜线
2. 单标签（自闭和 标签）
    eg:

head内的常用标签

1. Title   ：网页标题

2.   ：内部用来书写css代码

3.    ：引入外部的css文件或网站图标

4.    ： 内部用来书写js代码 
    ： 或引用外部的js代码文件

5. 标签介绍：（了解）
    元素可提供有关页面的元信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。
    标签位于文档的头部，不包含任何内容。
    提供的信息是用户不可见的。
    
meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。 

1.http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
    
      
    
    
    
    
                                                        
2.name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
    就是给你html加上各种关键词信息，方便搜索引擎（百度等）搜索到 （这叫SEO搜索引擎优化）
    
    网页的描述信息，会在搜索页面的右下角简介中展示

body内的常用标签

1.基本标签

标题标签   1-6级标题

加粗
斜体
下划线
删除线

段落标签
	水平分割线

	换行标签

2.标签的分类2

# 1.块级标签：独占一行
    eg: h1~h6 p div
    a.块级标签可以修改长度
    b.块级标签内部可以嵌套任意的块级标签和行内标签
       但p标签 虽然是块级标签，但是只能嵌套行内标签，不能嵌套块级标签  （HTML书写规范）
       	 如果你套了，问题也不大 因为浏览器会自动帮你解开（浏览器是直接面向用户的，不会轻易的报错，哪有有报错用户也基本感觉不出来）
            
# 2.行内标签(内联标签)：自身文本多大就占多大
    eg：i u s b span
    a.行内标签不可以修改长度 修改了也不会变化
    b.行内标签不能嵌套块级标签，可以嵌套行内标签（但没什么意义）

3.特殊符号

    >>> 空格
>	>>> 大于号 '>'
<	>>> 小于号 '<'
&	>>> 连接符 '&'
¥	>>> 人民币符 '￥'
©	>>> 版权'?'   (英文Copyright（版权）的简写，代表作者版权所有声明)
®	>>> 注册商标'?'

4.常用标签

div  属于块级标签

span 属于行内标签

上述的两个标签是在构造页面初期最常使用的，页面的布局一般先用div 和span 占位之后再去调整样式，尤其是div使用非常的频繁

div 你可以把它理解成 一块区域，也就意味着用div来提前规定所有的区域，之后往该区域内部填写内容即可
span 给普通的文本占位

3.img 标签

# 图片标签


属性：
src=''
    1.图片的路径，可以是本地的也可以是网上的
    2.URL   自动朝该url发送get请求获取数据    
    
alt='这是我的前女友'  : 当图片加载不出来的时候，给图片的描述信息
    
title='新垣结衣'     ： 当鼠标悬浮到图片上之后，自动展示的提示信息

height='800px'	    : 修改图片的高度 px像素单位
width=''	    : 修改图片的宽度
   若只修改高度或者宽度，另一个会根据原图等比例调整；若都修改了，没有考虑比例性的问题，图片就会失真

4.a标签

# 超链接标签
所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。



"""
当a标签制定的网址从来没有被点击过，那么a标签的字体颜色是蓝色，若点击过后 变成紫色 （浏览器给你记忆了）
"""

属性：
href
    1. 放URL，用户点击就会跳转到该URL页面
    2. 放其他标签的id值，点击即可跳转到对应的标签位置  格式：href='# id值'
target=
    1. 默认a标签是在当前页面完成跳转  》》》 '_self'
    2. 修改为新建窗口页面跳转        》》》 '_blank'
    
# a标签的锚点功能
""" eg: 点击一个文本标题，页面自动跳转到标题对应的内容区域（目录到正文内容） """
顶部
hello word!

中间

回到h1
回到中间

5.列表标签

1.无序列表（较多）


    第一项
    第二项
    第三项
    第四项


# 虽然ul标签很丑，但是在页面布局的时候 只要是排版一致的几行数据基本上用都是 ul标签

type属性：
    disc（实心圆点，默认值）
    circle（空心圆圈）
    square（实心方块）
    none（无样式）

2.有序列表（了解）


    111
    222
    333


type属性：
    1 数字列表，默认值
    A 大写字母
    a 小写字母
    Ⅰ大写罗马
    ⅰ小写罗马
    
start=""：  定义起始位

3.标题列表（了解）


  标题1
  内容1
  标题2
  内容1
  内容2

6.表格标签

jason 123 read
egon	123 dbj
tank  123 hecha
...
  标签

  一个tr就表示一行
              加粗文本
              正常文本
          表头(字段信息)
    	 表单(数据信息)

    
        username username
    

        
            jason
            123
            read
        
    


  加 表格外边框
  水平方向占多行  列合并
   垂直方向占多行  行合并

# 表格标签不一定都要讲thead 和 tbody 都写出来，可以只有表单 tbody
# 原生的表格标签很丑 但是后续我们一般都是使用框架封装好的 很好看
属性:

border: 表格边框.
cellpadding: 内边距  （文字距离内框线的距离）
cellspacing: 外边距  （内框线和外框线的距离）
width: 像素 百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）
7.表单标签（重要）
"""
能够获取前端用户数据(用户输入的、用户选择、用户上传...)基于网络发送给后端服务器
"""
# 写一个注册功能
  在该form标签内部书写的获取用户的数据都会被form标签提交到后端
    action属性:控制数据提交的后端路径(给哪个服务端提交数据)
        1.什么都不写  默认就是朝当前页面所在的url提交数据
        2.写全路径:https://www.baidu.com  朝百度服务端提交   
        3.只写路径后缀action='/index/' 自动识别出当前服务端的ip和port拼接到前面
          eg:host:port/index/
        
# 1.label标签
     标签为 input 元素定义标注（标记）。
     标签不会向用户呈现任何特殊效果。
     标签的 for 属性值应当与相关元素的 id 属性值相同。

    
# 2.input标签 就类似于前端的变形金刚  通过type属性变形
    type属性
        text:普通文本
        password:密文
        date:日期	
        submit:用来触发form表单提交数据的动作按钮
        button:就是一个普普通通的按钮 本身没有任何的功能 但是它是最有用的，学完js之后可以给它自定义各种功能
        reset:重置内容的按钮
        radio:单选框
            默认选中，要加checked='checked'
             男
            当标签的属性名和属性值一样的时候可以简写
            女
        checkbox:多选       # check的意思是 打钩
            DBJ
        file:获取文件  也可以一次性获取多个
            
        hidden:隐藏当前input框
            钓鱼网站  设置一些输入框的默认值（nama/vaule)，再把输入框隐藏，则提交数据时，就篡改了你的数据
        
    其他属性：
        name：表单提交时的“键”，注意和id的区别
        value：表单提交时对应项的值
            type="button", "reset", "submit"时，为按钮上显示的文本内容
            type="text","password","hidden"时，为输入框的初始值
            type="checkbox", "radio", "file"，为输入相关联的值
        checked：radio和checkbox中为默认被选中的项
        readonly：只读 （该输入框既不能输入，但向后端提交显示的数据  text和password设置只读）
        disabled：禁用 （该输入框既不能输入，也不会向后端提交数据   所有input均适用）
        placeholder：背景占位提示符  （在输入框中，背景显示的提示信息）
        
#input标签常与label标签联合使用
# 第一种 直接讲input框写在label内部  （建议这种，结果清晰）
  
    username:
					

#第二种 通过id链接即可 无需嵌套
password:

ps:input不跟label关联也没有问题
  
"""
label 和 input都是行内标签
"""
        
    
# 3.select标签 默认是单选 可以加mutiple参数变多选 默认选中selected   # select的意思是 选择
    

            
# 4.textarea标签  获取大段文本
    

# 能够触发form表单提交数据的按钮有哪些(一定要记住)
    1、
    2、
    
# 所有获取用户输入的标签 都应该有name属性
    name就类似于字典的key
  用户的数据就类似于字典的value
    # 需要用户选择的标签 你需要自己加上value值
        radio
        checkbox	
        option
        ps:如果你给获取用户输入的标签加了value值 那么就类似于默认值
8.验证form表单提交数据
# 接下来的flask框架代码无需掌握  看一下效果即可
pip3 install FLASK

# form表单默认提交数据的方式 是get请求  数据是直接放在url后面的
    http://127.0.0.1:5000/index/?username=sdadasdsda&gender=on
# 你可以通过method指定提交方式
    
  
# 针对用户选择的标签(radio/checkbox/select) 用户不需要输入内容 但是你需要提前给这些标签添加内容value值
gender:
    男
    女
    其他

hobby:
    篮球
    足球
    双色球

province：
    




"""
form表单提交文件需要注意： 
    属性设置
	1.method必须是post
	2.enctype="multipart/form-data"
            enctype类似于数据提交的编码格式
                默认是form-urlencoded 只能够提交普通的文本数据
                form-data 就可以支持提交文件数据
"""



"""下面的代码无需掌握 你只需要关心form表单即可"""
from flask import Flask, request

app = Flask(__name__)

# 当前url既可以支持get请求也可以支持post请求  如果不写默认只能支持get请求
@app.route('/index/',methods=['GET','POST'])   
    # route：路线的意思，第一个参数就是ip+端口，之后的路径。一般是视图名，特别注意 前后都有'/'
def index():
    print(request.form)  # 获取form表单提交过来的非文件数据
    # ImmutableMultiDict([('username', 'jason'), ('password', '123132131231233'), ('gender', 'on')])
    print(request.files)  # 获取文件数据,是字典类型
    file_obj = request.files.get('myfile.png')
    file_obj.save(file_obj.name)
    return 'OK'

app.run()


# 针对用户输入的标签。如果你加了value 那就是默认值
username:
disable 禁用
readonly只读

							
							
			前端							
						



						

						相关
						
				
						
			
																
								
										Java web开发：从零到 Run 一个现有的 Spring Boot 前后端分离项目（前端Vue）
									
									
								 

        
								
							
							

																
								
										nodejs 一个简单的web服务器，用于前端自己快速测试部署
									
									
								 

        
								
							
							

																
								
										深入理解前端跨域方法和原理
									
									
								 

        
								
							
							

																
								
										【前端单元测试入门04】Karma
									
									
								 

        
								
							
							

																
								
										前端MVC Vue2学习总结（六）——axios与跨域HTTP请求、Lodash工具库
									
									
								 

        
								
							
							

																
								
										前端MVC Vue2学习总结（二）——Vue的实例、生命周期与Vue脚手架（vue-cli）
									
									
								 

        
								
							
							

																
								
										web前端面试题
									
									
								 

        
								
							
							

																
								
										箭头流程图--前端实现
									
									
								 

        
								
							
							

																
								
										GMTC 2019-前端夜话《聊聊前端工程师的成长和发展》会后简要总结
									
									
								 

        
								
							
							

																
								
										第十一章 前端基础
									
									
								 

        
								
							
							

																
								
										前端性能优化
									
									
								 

        
								
							
							

																
								
										前端开发框架Vue之findIndex() 的使用
									
									
								 

        
								
							
							            
            
            
                                    
           
  			
						

					

														
					
					

					
									
					
									   标签
										
										
										
									

										
										
									
					

					
				


	
	一品网 冀ICP备14022925号-6
		


egon DBJ