今日内容

HTML简介

HTML是构造网页的骨架>>>:几乎所有的网站都是由HTML构建而成

HTML:超文本标记语言

# 不是一门编程语言 没有任何的逻辑 只有固定的标记功能

"""

HTML标签的分类

	1.双标签(有头有尾)

		<a></a>

	2.自闭合标签(单标签)

		<img>

"""

# HTML文档结构

	<html>

  	<head>编写给浏览器查看的内容</head>

    <body>编写展示给用户查看的内容</body>

  </html>

  '''在使用编程工具创建的时候就会自动编写文档结构'''

# HTML语法注释

	<!--单行注释-->

  <!--

  多行注释

  多行注释

  -->

  '''在编写的时候 编程工具也有注释快捷键 ctrl+?'''

如何创建及展示

"""

存档网页骨架的文件后缀名一般都是.html

	该类型文件主要的打开方式为浏览器形式

"""

1.以pycharm为例

	右键new点击HTML FILE创建即可

2.如何打开展示

	右上方会提供多种浏览器(注意需要提前下载)

# 编写HTML标签的时候 不需要自己写大括号小括号 只需要写标签名称+tab键即可自动补全(所有支持编写html文件的工具内部自带的插件语法功能)

head内常见标签

title		定义网页标题

style		内部支持css代码

script	内部支持编写js代码 还可以通过src属性导入外部js文件

link		通过href属性引入外部的css文件

meta		定义网页源信息

			keywords关键字搜索

  			description网页描述信息

"""

在html文件中 可以编写html和css以及js

	但是实际工作中三者其实是分开存放的 这样有利于后期维护和扩展

"""

body内基本标签

h1~h6	标题标签

p			段落标签

b			加粗

i			斜体

u			下划线

s			删除线

br			换行

hr			水平分割线

"""有时候相同的样式 可能有多种标签可以实现!!!"""

标签分类

	分类1:单双标签

	分类2:

    		块儿级标签：h1~h6 p

    			独占一行(后期可以通过css实现不占一行)

		行内标签：u i s b

			自身文本多大就占多大

特殊符号

&nbsp;			空格

&gt;			大于号

&lt;			小于号

&amp;			&符号

&yen;			羊角符

&copy;			版权符

&reg;			注册

常见标签：div、span、a、img

# 网页在制作之前需要提前布局好

布局标签

	div			块儿级标签

	span			行内标签

"""

标签是可以嵌套的 但是需要遵循以下规律

	1、块儿级标签 可以无限制的嵌套块儿级标签和行内标签

		特例:p标签虽然是块儿级标签但是也不能嵌套块儿级标签

	2、行内标签不能嵌套块儿级标签 可以嵌套行内标签

知识点扩展

	页面布局的技巧

		先用div划分区域 之后再考虑填充具体内容

			可以参考小米官网练习该技巧

"""

1.a标签:链接标签

	用法1:通过href属性指定网址(URL)点击跳转

		跳转过程中有两种方式

			1.当前页面跳转	target="_self"  默认

			2.新建页面跳转	target="_blank"

	用法2:锚点功能

		通过href属性指定标签的id值点击即可跳转到对应位置

"""

网址其实并不是一个非常专业的名词

	URL:统一资源定位符

"""

2.img标签:图片标签

	1、src属性指定图片地址

  		可以是本地的地址也可以是网络上的地址

 	2、alt属性编写文本

  		用于在图片无法加载出来的情况下的提示信息

	3、title属性写文本

  		用于鼠标悬浮在图片上之后提示的文本信息

	4、height、width属性写像素

  		用于调整图片的尺寸

    	注意：调整的时候 修改一个另外一个自动等比例缩放

		如果同事调整两个 那么可能会造成图片的失真

	5、在外面套a标签：点击图片可以跳转a标签href属性对应地址

列表标签

1.无序列表(掌握)

	# 前面没有用于标识数字顺序的提示

	<ul>

        <li>111</li>

        <li>222</li>

        <li>333</li>

	</ul>

  """

  网页上有规则排列的多个横向或者竖向内容 几乎都是无序列表

  	要想实现需要css相关知识

  """

2.有序列表(了解)

	<ol>

        <li>111</li>

        <li>222</li>

        <li>333</li>

	</ol>

3.标题列表(了解)

	<dl>

        <dt>标题1</dt>

          <dd>内容1</dd>

        <dt>标题2</dt>

          <dd>内容1</dd>

          <dd>内容2</dd>

	</dl>

表格标签

# 当需要展示一些具体固定格式的多条数据的时候可以考虑使用(excel)

# 表格标签的格式

	<table>

    <thead></thead>     表头

    <tbody></tbody>     表单

	</table>

# tr标签

	tr就表示一行

# th标签

	在表头的字段名称

# td标签

	普通的单元格数据

<table>

    <thead>

        <tr>

            <th>姓名</th>

            <th>密码</th>

            <th>年龄</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>jason</td>

            <td>123</td>

            <td>18</td>

        </tr>

    </tbody>

</table>

"""我们只需要掌握最基本的html标签即可 至于花里胡哨的样式后面学习完前端框架之后  直接cv拷贝即可 都是别人提前写好的"""

border: 表格边框.

cellpadding: 内边距

cellspacing: 外边距.

width: 像素 百分比.（最好通过css来设置长宽）

rowspan: 单元格竖跨多少行

colspan: 单元格横跨多少列（即合并单元格）

form表单(很重要)

# form表单:获取用户的数据并发送给后端(服务端)

	eg:网站的登录、注册、验证码...

'''以注册页面为例'''

1.获取用户数据最为常用的标签就是input标签并且该标签是行内标签

	input标签是前端标签里面的变形金刚

  	通过type参数的不同变换不同的表现形式

		text			普通文本

		password		密码展示

		date			日历展示

		radio

				单选>>>:多个选项标签需要有相同的name属性

				默认选中需要额外配置checked='checked'

				当属性名与属性值相等的时候可以简写checked

		checkbox

				多选>>>:默认选中也是checked属性

		email			邮箱格式

		file			上传文件>>>:默认只支持单个文件

        				如果需要一次性上传多个需要额外配置multiple

		submit		提交按钮>>>:点击出发提交数据的动作

		button		普通按钮>>>:本身没有任何功能 需要绑定(JS)

		reset			重置按钮

      	按钮组的提示信息可以通过value属性自定义，如果不自定义

        那么不同的浏览器可能会展示出不同的提示信息 尤其是submit按钮

  select标签是下拉框选项

  		一个个选项就是一个个option标签 默认是单选也可以变为多选

    		multiple

  textarea标签

  		获取大段文本内容

2.直接编写input会出现黄色阴影，原因在于input需要结合lable一起使用

	label标签作用：点击内部文本可以跳转输入框内

	方式1:lable包裹input并绑定id

		<label for='input标签id值'>input标签</label>

	方式2:label与input单独出现并绑定id

 		<label for="d1">username:</label>

		<input type="text" id="d1">

3.form表单提交数据

	数据的提交地址由form表单的action参数来控制

	action="URL"

    	# 不写默认朝当前页面所在的地址提交

	method="数据的提交方式"

    	# 数据的提交方式有很多种 这里先忽略(后续讲解)

      	get post put delete patch...

"""

form表单在提交数据的时候 如果含文件则需要指定两个固定参数

	method='post'

	enctype="multipart/form-data"

"""

标签的两大重要属性

1.id属性		个体查找

	类似于标签的身份证号 在同一个html页面上id不能重复

2.class属性	群体查找

	类似于python面向对象中的类的继承

	可以将多个标签划为一类

		<h1 class='c1'></h1>

		<p class='c1'></p>

	并且一个标签可以有很多类

		<h1 class='c1 c2 c3'></h1>

		<p class='c1 c8 c9'></p>

作业

1.学习前端没有捷径就是多练多记

2.整理今日内容并编写博客

1、前端--HTML简介、head内常见标签、body内常见标签（特殊符号、div、span、a、img、列表、表格table、表单form）、标签两大属性的更多相关文章

  1. HTML中的表单<form>标签

    一.HTML表单 HTML 表单用于搜集不同类型的用户输入. HTML 表单包含表单元素,表单元素指的是不同类型的 input 元素.复选框.单选按钮.提交按钮等等. 关于表单的更多内容可以参考htt ...

  2. 前端开发-4-HTML-table&form&表单控制 标签

    1.table标签 <!DOCTYPE html> <html lang="cn"> <head> <meta charset=" ...

  3. 前端与后台可能需要使用交互的表单form，input标签

    前端与后台可能需要使用交互的表单标签 form表单和input标签 textarea文本域表单 select,option下拉列表表单 fieldset和legend组合表单 label标签 form ...

  4. HTML的基本操作学习----常用标签，特殊符号，列表，表格，表单

    什么是HTML 常用标签 标题标签 段落标签 粗体标签+斜体 超链接标签 图片标签 列表标签 无序标签 有序标签 自定义列表 div标签 特殊符号 表格 表单 HTML 什么是 HTML?   HTM ...

  5. web（四）html表单类标签

    表单类标签 操作者用于输入信息,并将信息提交给服务器的标签集合. 表单标签介绍 form标签:表单元素(其余标签)标签的容器标签 input标签:用于用户信息输入的标签. button标签:按钮标签. ...

  6. 12种炫酷HTML5 SVG和CSS3表单浮动标签特效

    这是一组效果非常炫酷的HTML5 SVG和CSS3表单浮动标签特效.这组浮动标签特效共12种效果,使用SVG和CSS3来制作完成.这些浮动标签效果部分在元素的伪元素上使用CSS transitions ...

  7. html表单相关标签及属性

    1.<form>标签 定义整体的表单区域 action属性 定义表单数据提交地址 method属性 定义表单提交的方式,一般有“get”方式和“post”方式 2.<label> ...

  8. 框架，表格，表单元素，css基础以及基本标签的结合

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...

  9. .NET Core的响应式框架,基于Ace Admin框架菜单导航,Bootstrap布局,fontAwesome图标,内嵌Iframe用EasyUI做数据绑定,动态配置列表,动态配置表单

    netnrf 响应式框架 用于快速开发的响应式框架 演示:https://rf2.netnr.com v3.x 前端采用 jQuery + Bootstrap + EasyUI + AceAdmin ...

  10. HTML表单提交标签

    <form>表单提交标签,设置提交范围 有name属性才能被提交 action:提交的地址url method:提交方式 get方式(默认):会将参数拼接在连接后,有大小限制(4k) po ...

随机推荐

  1. 移动端调试 - UC浏览器开发者版 - WIFI

    Chrome  功能特性 支持PC或Pad设备,实时调试手机网页 DOM.CSS.JS调试 多功能面板满足多种调试需求 1   准备工作 保证手机与PC处于同一个无线网段. 下载Android平台的U ...

  2. kafka时间轮的原理（一）

    概述 早就想写关于kafka时间轮的随笔了,奈何时间不够,技术感觉理解不到位,现在把我之前学习到的进行整理一下,以便于以后并不会忘却.kafka时间轮是一个时间延时调度的工具,学习它可以掌握更加灵活先 ...

  3. session反序列化

    先来了解一下关于session的一些基础知识 什么是session?在计算机中,尤其是在网络应用中,称为"会话控制".Session 对象存储特定用户会话所需的属性及配置信息.这样 ...

  4. CTF-sql-group by报错注入

    本文章主要涉及group by报错注入的原理讲解,如有错误,望指出.(附有目录,如需查看请点右下角) 一.下图为本次文章所使用到 user表,该表所在的数据库为 test 二.首先介绍一下本文章所使用 ...

  5. VirtualBox 安装 Ubuntu 20.04 全流程

    VirtualBox 安装 Ubuntu 20.04 全流程 内容概要 这个作业属于哪个课程 2022面向对象程序设计 这个作业要求在哪里 2022面向对象程序设计寒假作业1 这个作业的目标 在虚拟机 ...

  6. Collection类集

    1.Collection接口 Collection是最基本的集合接口,一个Collection代表一组Object,即Collection的元素(Elements).一些Collection允许相同的 ...

  7. 集合框架-ArrayList集合存储自定义对象

    1 package cn.itcast.p3.arraylist.test; 2 3 import java.util.ArrayList; 4 import java.util.Iterator; ...

  8. linux正则sed实战案例详解

    目录 1. 将nginx.conf中的注释全部去掉 2. 将nginx.com中每一行之前增加注释 3.要求一键修改本机的ip 4.将/etc/passwd中的root修改成ROOT 1. 将ngin ...

  9. linux文件创建删除与基础命令使用

    目录 一:linux介绍 二:系统介绍 三:系统命令语法格式 四:系统目录结构 五:系统路径的类型 六:系统运行命令 七:查看系统命令帮助man手册 八:系统快捷方式 九:常用系统命令 十:进行目录创 ...

  10. 使用VSCode在本地电脑上对树莓派远程开发

    目的及原理 有时身边没有额外的显示器和键盘,或者有时树莓派在另一个屋子连接着路由器,那么当我们想在树莓派上做开发时就可以使用VS Code的远程开发能力.下面一张图显而易见地说明了远程开发的工作原理( ...