HTML5教程

html之标签

本文主要是介绍html之标签，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

分类：双标签、单标签

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

1、head内常用标签

<head>
    <title>网页标题</title>
    <!--css代码 -->
    <style></style>
    <!--js代码-->
    <script></script>
    <link rel="stylesheet" href="mycss.css">  引入外部css文件
    <meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺">当你在用浏览器搜索的时候 只要输入了keywords后面指定的关键字那么该网页都有可能被百度搜索出来展示给用户
<meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！">  网页的描述性信息
</head>

2、body内常用标签

基本标签

<!--标题标签 1-6级-->
<h1></h1>  

<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>

<p>
  段落标签  
</p>

<br>换行标签
<hr>水平分割线标签



<!--
块级标签:独占一行
		h1~h6	p div
  	1 块级标签可以修改长宽 行内标签不可以 修改了也不会变化
    2 块级标签内部可以嵌套任意的块级标签和行内标签
    	但是p标签虽然是块级标签 但是它只能嵌套行内标签 不能嵌套块儿级标签
      	如果套了 问题也不大 因为浏览器会自动帮你解开(浏览器是直接面向用户的 不会轻易的报错 哪怕有报错用户也基本感觉不出来)
       
    总结:
      	只要是块级标签都可以嵌套任意的块儿级标签和行内标签
        但是p标签只能嵌套行内标签（HTML书写规范）

行内标签:自身文本多大就占多大
		i u s b span
  	行内标签不能嵌套块儿级标签 可以嵌套行内标签

-->

特殊符号

&nbsp;  空格
&gt;   大于号
&lt;   小于号
&amp;  &
&yen;  ¥
&copy;		©
商标&reg;  ®

常用标签

div与span

div 块级标签
span 行内标签
上述的两个标签是在构造页面初期最常使用的 页面的布局一般先用div和span占位之后再去调整样式 尤其是div使用非常的频繁
div你可以把它看成是一块区域 也就意味着用div来提前规定所有的区域，之后往该区域内部填写内容即可，而普通的文本先用span标签

a标签

# 链接标签
<a href=""></a>
<!--
当a标签指定的网址从来没有被点击过 那么a标签的字体颜色是蓝色
如果点击过了就会是紫色（浏览器给你记忆了）


href
	1.放url，用户点击就会跳转到该url页面
  2.放其他标签的id值 点击即可跳转到对应的标签位置

target
	默认a标签是在当前页面完成跳转  _self
  你也可以修改为新建页面跳转			_blank
-->

<!--a标签的锚点功能-->
点击一个文本标题 页面自动跳转到标题对应的内容区域"""
<a href="" id="d1">顶部</a>
<h1 id="d111">hello world</h1>
<div style="height: 1000px;background-color: red"></div>
<a href="" id="d2">中间</a>
<div style="height: 1000px;background-color: greenyellow"></div>
<a href="#d1">底部</a>
<a href="#d2">回到中间</a>
<a href="#d111">回到中间</a>

img标签

<img src="" alt="" title="" >

src	
	1.图片的路径	可以是本地的也可以是网上的
  	2.url	  自动朝该url发送get请求获取数据

alt="这是"
	当图片加载不出来的时候 给图片的描述性信息

title="新衣"
	当鼠标悬浮到图片上之后 自动展示的提示信息

height="800px" 
		
width=""
	高度和宽度当只修改一个的时候 另外一个参数会等比例缩放
  如果修改了两个参数 并且没有考虑比例的问题 那么图片就会失真

id与clas属性

1.id值
类似于标签的身份证号 在同一个html页面上id值不能重复
2.class值
该值有点类似于面向对象里面的继承 一个标签可以继承多个class值

标签既可以有默认的书写也可以有自定义的书写

<p class = "p1" user="lili">
    
</p>

3、列表标签

1、无序列表

<ul>
    <li>1</li>
    <li>2</li>
</ul>

2、有序列表

<ol>
    <li>1</li>
    <li>2</li>
</ol>

3、标题列表

<dl>
    <dt>标题1</dt>
    <dd>内容1</dd>
</dl>

4、表格标签

<body>
   <table border="1">
<!--   一个tr就是一行-->
       <thead>
            <tr>
                <th>id</th>
                <th>username</th>
                <th>password</th>
            </tr>
            <tr>
                <td>1</td>
                <td>upup</td>
                <td>123456</td>
            </tr>
             <tr>
                <td>2</td>
                <td rowspan="2">bjt</td>
                <td>123456</td>
            </tr>
       </thead>
       <tbody></tbody>
   </table>
</body>


<table border="1">  加外边宽
<td colspan="2">egon</td>  水平方向占多行
<td rowspan="2">DBJ</td>   垂直方向占多行

5、表单标签

<form action="">    </form>
<!--
action:控制数据提交的后端路径，要提交给哪个服务器
	1、什么都不写 action="" 默认向当前服务器提交数据
	2、写全路径:https://www.baidu.com  向百度服务端提交
    3.只写路径后缀action='/index/'  
    	自动识别出当前服务端的ip和port拼接到前面
      host:port/index/
-->

<!--通过label和id可使点击文字光标到input框
	第一种 直接讲input框写在label内
	第二种 通过id链接即可 无需嵌套
-->
<label for = "d1">
	username:<input type="text" id = "d1">
</label>



<!--input标签 就类似于前端的变形金刚  通过type属性变形
type属性	：text:普通文本
  		   password:密文
	       date:日期	
 	       submit:用来触发form表单提交数据的动作
 	       button:就是一个普普通通的按钮 本身没有任何的功能 但是它是最有用的，学完js之后可以给它自定义各种功能
  		   reset:重置内容
  	       radio:单选
    	默认选中要加checked='checked'
-->
<input type="radio" name="gender" checked='checked'>男
      <!--当标签的属性名和属性值一样的时候可以简写-->
<input type="radio" name="gender" checked>女
	       <!--checkbox:多选-->
<input type="checkbox" checked>DBJ
  
  		file:获取文件  也可以一次性获取多个
<input type="file" multiple>
       <!-- hidden:隐藏当前input框
    	钓鱼网站
value：可以给按钮加值-->

<!--下拉框  select标签 默认是单选 
可以加mutiple参数变多选 默认选中selected-->

<select name="" id="" multiple>
                <option value="" selected>新垣结衣</option>
                <option value="" selected>斯佳丽</option>
                <option value="">明老师</option>
  </select>

<!--textarea标签  获取大段文本-->
<textarea name="" id="" cols="30" rows="10"></textarea>

可以触发form可以提交的按钮：

		1、<input type="submit" value="注册">
		2、<button>点我</button>

所有获取用户输入的标签 都应该有name属性,name就类似于字典的key,用户的数据就类似于字典的value

  <p>gender:
            <input type="radio" name="gender">男
            <input type="radio" name="gender">女
            <input type="radio" name="gender">其他
  </p>

form表单向后端提交数据

python安装

pip3 install FLASK

Python代码

from flask import Flask, request


app = Flask(__name__)


# 当前url既可以支持get请求也可以支持post请求  如果不写默认只能支持get请求
@app.route('/index/',methods=['GET','POST'])
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()

<!--form表单默认提交数据的方式 是get请求  数据是直接放在url后面的,具有不安全性
	http://127.0.0.1:5000/index/?username=sdadasdsda&gender=on
你可以通过method指定提交方式-->
	<form action="http://127.0.0.1:5000/index/" method="post">
  
<!--针对用户选择的标签 用户不需要输入内容 但是你需要提前给这些标签添加内容value值-->
<p>gender:
            <input type="radio" name="gender" value="male">男
            <input type="radio" name="gender" checked value="female">女
            <input type="radio" name="gender" value="others">其他
</p>
      
<p>hobby:
            <input type="checkbox" name="hobby" value="basketball">篮球
            <input type="checkbox" checked name="hobby" value="football">足球
            <input type="checkbox" checked name="hobby" value="doublecolorball">双色球
</p>
        
<p>province：
            <select name="province" id="">
                <option value="sh">上海</option>
                <option value="bj" selected>北京</option>
                <option value="sz">深圳</option>
            </select>
</p>



<!--
form表单提交文件需要注意
	1.method必须是post
	2.enctype="multipart/form-data"
			enctype类似于数据提交的编码格式
			默认是urlencoded 只能够提交普通的文本数据
			formdata 就可以支持提交文件数据
-->
<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">


<!--针对用户输入的标签。如果加value 是默认值-->
<label for="d1">username:<input type="text" id="d1" name="username" value="默认值"></label>
<!--disable 禁用
    readonly只读-->
这篇关于html之标签的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航