html基础

HTML 简介

HTML 实例

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>这是一个笔记</title>

</head>

<body>

<h1>我的第一个小标题</h1>

<p>我的第一个p段落。</p>

</body>

</html>


实例解析

<!DOCTYPE html> 声明为 HTML5 文档

<html> 元素是 HTML 页面的根元素

<head> 元素包含了文档的元(meta)数据,如 <meta charset="utf-8"> 定义网页编码格式为 utf-8

<title> 元素描述了文档的标题

<body> 元素包含了可见的页面内容

<h1> 元素定义一个大标题

<p> 元素定义一个段落

注:在浏览器的页面上使用键盘上的 F12 按键开启调试模式,就可以看到组成标签。


什么是HTML?

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言: HyperText Markup Language

HTML 不是一种编程语言,而是一种标记语言

标记语言是一套标记标签 (markup tag)

HTML 使用标记标签来描述网页

HTML 文档包含了HTML 标签文本内容

HTML文档也叫做 web 页面

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词,比如

HTML 标签通常是成对出现的,比如

标签对中的第一个标签是开始标签,第二个标签是结束标签

开始和结束标签也被称为开放标签闭合标签

<标签>内容</标签>


(一)标签的分类有两种:

1.行内元素:可以和其他元素标签一行显示

只能嵌套其他行内元素和普通的文字

不能设置width,height 宽高

2.块元素:前后换行,不与其他元素一行显示

可以嵌套其他行内元素和块元素的普通文本

可以设置width,height 宽高

在标签上都可以添加一个align属性,对齐方式: left right center

(二)img 图像标签

src 是必须属性 图像路径分两种

1.绝对地址:网络地址

2.相对地址:本地地址

可添加|设置:

1.width 宽度

2.height 高度

3.border 边框

4.title 当鼠标悬停在内容上的时候,显示的提示字

5.alt 如果图片无法正常加载,显示的提示字

如:<img src="img/工作狂.jpg" title="程序猿" alt="淦" height="500px" width="500px">

......

(三)常用标签

1.background 一般用来设置背景图片

如:<body background="img/图片文件地址|绝对地址"></body>

2.bgcolor 设置背景颜色,颜色的设置有三种形式:一种为16进制,一种为英文形式,最后一种是rgb形式

如:

<body bgcolor="#000"></body>

<body bgcolor="black"></body>

<body bgcolor="0,0,0"></body>

背景颜色和图片可以同时使用,而往往,背景图片会优先运行。图片覆盖不到的地方,会执行颜色代码。

如:

body{

background:url(图片的绝对地址|相对地址) #000no-repeat;

}

3.br 换行

4.hr 水平线

5.p 段落标签

6.a herf="" 超链接

7.table 表格,也有多种属性,主要有rowspan跨行、colspan跨列,一般也需要设置好宽高,这里就不演示了

8.tr 行

9.th 标题栏

10.td 单元格

11.ul 无序列表:可以给type属性:circle square desc默认,分别是不同的行头符号形状

12.ol 有序列表:可以给type属性:a A 1 i I等,分别设置不同的行头序列号

13.li 列表项标记,是ul与ol的直接子元素,li标签中可以定义任意元素,也可以使有序和无序的列表互相嵌套

......

内容没有个数限制

块元素,只能嵌套其他行内和文本

span 便于为元素提供样式(用来选中文本)

div 块元素

h1~h6 标题标签

根据权重的不同,字体大小依次减小、 加粗


表单:

form 表单

作用:收集用户信息

定义form标签定义表单 form

form标签上常用的属性:

1.action 数据提交的地址

2.name 表单名称

3.method 请求方式 get/post之间的区别:

get : 显示在地址栏中 ?后以键值对形式拼接

大小受限制 不安全 效率较高 浏览器默认(百度)

post : 相对安全 大小没限制 请求体重

4.enctype

如果表单中存在文件上传,需要更改 multipart/form-data,否则默认即可

表单域|表单标签:

只要想要提交数据的表单元素,需要必须存在name属性

input type属性不同的值决定表单标签不同的功能

text 普通文本框

password 密码框

radio 单选框

单选效果:这些单选框设置为一组,name属性值相同为一组

checkbox 多选框

一个功能的多选择设置为一组 name属性值相同

file 文件上传

submit 提交按钮 value属性的值修改submit按钮的显示

button 普通按钮 常结合js一起使用

reset 重置按钮,恢复默认值

fieldset 选区

select 下拉框

option 下拉列表选项

textarea 多行文本域

label 定义

常用的几个属性:

name:一般表单元素

id:唯一的 常结合js使用

class:可重读 可以给多个值 结合css

表单元素的常用属性:

name 给个名字

value 默认值

placeholder 提示字

checked 单选|多选--默认选择

disabled 禁用 不能修改不能提交

readonly 只读 只是不能修改,可以提交

举个栗子:

<fieldset>

<legend><h2>相亲信息表</h2></legend>

<hr>

<form action="" method="get" enctype="multipart/form-data">

<p>

<span style="color:pink">姓名:</span><input type="text" name="username" value="zhangsan" disabled>

</p>

<p>

<span style="color:pink">银行卡密码:</span><input type="password" name="userpwd" readonly>

</p>

<p>

<span style="color:pink">性别:</span>

<input type="radio" name="gender" value="man" checked="checked">男

<input type="radio" id="woman" name="gender" value="woman"><label for="woman">女</label>

</p>

<p>

<span style="color:blue;">兴趣爱好:</span>

<input type="checkbox" type="redio" id="1" name="hobby" value="1"><label for="1">吃饭</label>

<input type="checkbox" name="hobby" value="2">睡觉

<input type="checkbox" name="hobby" value="3" checked>敲代码

</p>

<p>

<span style="color:blue;">生活照:</span><input type="file" name="photo">

</p>

<p align="center">

<input type="hidden" name="隐藏标签" value="隐藏标签的值">

</p>

<p>

理想型:

<select name="wife" id="">

<option value="1">温柔型</option>

<option value="2" selected>娇蛮型</option>

<option value="3">可爱型</option>

<option value="4">娇小型</option>

</select>

</p>

<p>

交友宣言:<textarea name="info" if="" cols="30" rows="10" placeholder="宁可错杀一千,不可错失一个">我是...</textarea>

</p>

<input type="submit" value="submit">

<input type="button" value="button" onclick="alert('点我做撒?')">

<input type="reset" value="reset">

</form>

</fieldset>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • javascript基础语法

    JavaScript 是一种具有面向对象能力的、解释型的程序设计语言。更具体一点,它是基于对象和事件驱动并具有相对安全性的客户端脚本语言。它的主要目的是,验证发...

    wolf
  • (六)日志生成

    1)代码参数说明 // 参数一:控制发送每条的延时时间,默认是0 Long delay = args.length > 0 ? Long.parseLong...

    wolf
  • Oracle sql语句--单行函数、组函数、分组与过滤组信息

    函数分为系统内置函数自定义函数(后期学习的plsql 中定义);了解系统内置函数(方法),重点掌握 to_date 、 to_char (字符和日期的转...

    wolf
  • HTML笔记

    菜鸟雷
  • typescript基础篇(6):泛型

    软件工程中,我们不仅要创建一致的定义良好的API,同时也要考虑可重用性。组件不仅能够支持当前的数据类型,同时也能支持未来的数据类型,在定义函数,接口或类的时候,...

    一粒小麦
  • SQVI-如何自行创建报表?

    在项目实施过程中,SAP标准报表提供的功能不能满足一些特殊的需求,因而会有一些临时的报表需求,若开发人员临时写一个报表,需要开发测试过程,时间较长,此时,实施工...

    用户5495712
  • [硬件]关于SPI Flash那些你不知道的事儿

    以华邦W25Q128为例,详解SPI Flash的特点,读写注意事项,和地址范围等。

    单片机点灯小能手
  • SAS-走近Log,实现程序的“风险控制”

    从第一天学习SAS开始,就摆脱不了看SAS日志,每次运行完程序的第一件事,不是看程序运行的结果,而是点击一下Log页面,第二件事也不是去看结果,而是仔细的浏览L...

    Setup
  • linux学习第六十九篇:分发系统介绍,expect脚本远程登录,expect脚本远程执行命令,expect脚本传递参数

    分发系统介绍 expect可以让我们实现自动登录远程机器,并且可以实现自动远程执行命令。当然若是使用不带密码的密钥验证同样可以实现自动登录和自动远程执行命令。...

    用户1215343
  • frp实现内网穿透 | frp服务端配置 | frp客户端配置

    frp 是一个专注于内网穿透的高性能的反向代理应用,支持 TCP、UDP、HTTP、HTTPS 等多种协议。可以将内网服务以安全、便捷的方式通过具有公网 IP ...

    宋天伦

扫码关注云+社区

领取腾讯云代金券