HTML的基础知识总结
- html的大致结构为代码所示,注意html中的标签是成对存在的。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTE-8><title>网页标签<title> </head> <body></body> </html>
html中常用的简单标签
| <b>与<strong>标签 | 此标签是用来加粗字体的 |
| <i>与<em>标签 | 此标签是让字体变倾斜 |
| <del>标签 | 此标签为删除线 |
| <u>标签 | 此标签为文字下面加下划线 |
| <br>标签 | 此标签作用为换行 |
| <pre>标签 | 此标签为格式化标签 |
| <p>标签 | 此标签为段落标签，单独一行自动换行 |
| <div>标签 | 此标签为网页布所用 |
| <span>标签 | 此标签用来修饰文本 |
| <sup>标签 | 此标签为上标 |
| <sub>标签 | 此标签为下标 |
| <hr>标签 | 此标签为水平分割线 |
| <hn>标签 | 此标签为题目标签，设计标题字体大小 |
<!DOCTYPE HTML>
<html><head><meta charest="utf-8"/><title>常用标签的使用</title></head><body><b>我很高兴</b> <!--粗体--><strong>我也会让你很高兴</strong> <!--也是粗体--><i>哟</i> <!--斜体--><em>嘿嘿</em> <!--也是斜体--><u>第一句话</u> <!--下划线--> <del>不行，我不能认识你</del> <!--删除线--><p>一句话完了直接换行</p> <hr width="900",noshade> <!--水平分割线--><h1>1号标题</h1><h2>2号标题</h2><h3>3号标题</h3> <!--hn标签是标题标签从h1到hn字体大小依次减小--></body></html>2.1表单标签，表单标签由3种标签组成分别为，input，textarea，select，在表单中才能使用
input标签，input的表单语法格式为<input type="元素类型" name="元素名称" value="元素值">
| name | 字符串 | 元素的名字 |
| value | 字符串 | 元素的值 |
| ID | 字符串 | 客户端的标识 |
| size | 数字 | 以字符个数来定义高度 |
| maxlength | 数字 | 元素接受的上限 |
| checked | 元素是否被选中 |
其中特殊的元素定义标签lable标签为input元素不会呈现出任何样式；
readonly... 属性规定只能读，只读片段不能改写；
disable...被禁用的input不能用，不能点击
required...提交时，元素中为空白是不能提交，同时会提示文字；
autofocus...当页面打开是会自动获得光标；
<!DOCTYPE html>
<html lang="en">
<head><meta charest="UTF-8><title>form表单</title>
</head>
<body><lable for="usename">用户名称：</lable><input type="text" id="usename" name="usename" value="zhangsan" readonly><br/><input type="text" name="usename" value="zhangsan" disabled><br/><input type="password" name="password" placehoder="请输入您的密码" required autofocus><br/><input type="radio" value="男" name="gender" checked>男<input type="radio" value="女" name="gender">女<br/></body>
</html>其中type的属性有：
| type="text" | 单行文本框 |
| type="password" | 密码框 |
| type="reset" | 重置框 |
| type="radio" | 单选按钮 |
| type="checkbox" | 多选按钮 |
| type="button" | 按钮 |
| type="submit" | 提交按钮 |
| type="image" | 图像按钮 |
| type="hidden" | 隐藏域 |
| type="file" | 文本域 |
<input type="text"/>单行文本框用来输入常用的信息，常用的属性为name，value，maxlength；
<input type="password"/>密码输入框为输入密码；
<input type="radio"/>单选按钮为单项选择，在使用是选择的内容属性必须相同，不是相同属性则无法生效，使用的时候自动选择第一个元素，加上checked属性可以默认中间选项；
<input type="checkbox"/>常用于多项选择，与radio标签相同加上checked可以默认中项；
<input type="reset"/>重置按钮，当用户信息有误时，可单击重置按钮取消所输入的信息；
<input type="image"/>图像按钮与button属性相同，只是用图像替代了默认的按钮，图像src属性需要指定url地址；
<input type="submit"/>输入完信息后需要提交，则使用submit提交按钮；
<input type="email"/>此输入框是输入email邮箱的输入框；
<input type="tel"/>提供输入电话号码的文本框；
<!DOCTYPE HTML>
<html lang="en">
<head><meta charest="UTF-8"><title>form表单</title>
</head>
<body><input type="submit" value="注册用户"><br/><input type="reset" value="重置数据"><br/><inout type="submit" value="提交"><br/><input typr="email" name="email" placehoder="请输入你的邮箱"><br/><input type="tel" name="" id="" value=""><input type="date" name="" id="" value=""><input type="time" name="" id="" value=""><input type="rang" name="" id="" value=""><input type="url" name="" id="" value="">
您的爱好：<input type="checkbox" value="football" name="fav">足球<input type="checkbox" value="篮球" name="fav">篮球<input type="checkbox" value="LOL" name="fav">LOL<input type="checkbox" value="乒乓球" name="fav">乒乓球<input type="checkbox" value="跳舞" name="fav">跳舞 <!--input标签的属性值以及checkbox标签的作用-->
2.2select标签
select标签元素主要以下拉框表示，当slect设置了multiple时，则是一列表的形式显示；
| 属性名称 | 属性值 | 属性作用 |
| option | 子项 | 下拉框的选项 |
| value | 字符串 | 选项的值 |
| name | 字符串 | 下拉框的名称 |
| slected | 默认的选项 | |
| multiple | "multiple" | 一列表的形式显示 |
<!DOCTYPE HTML>
<html lang="en">
<head><mate charest="UTF-8"><title>form表单</title>
</head>
<body>你喜欢的动物：<select><option value="猫">猫</option><option value="狗">狗</option><option value="猴子">猴子</option><option value="熊猫">熊猫</option></select> <!--没有假multiple则是以下拉框的形式显示-->你喜欢的运动：<select multiple="multiple"><option value="篮球">篮球</option><option value="足球">足球</option><option value="网球">网球</option> <option value="跳绳">跳绳</option></select> <!--加了multiple显示则是表格-->2.3textarea标签
该标签的表达方式为，<textarea cols=" " rows=" "></textarea>
| 属性名称 | 属性值 | 属性作用 |
| cols | 数字 | 以字符个数设定的文本框的宽度 |
| rols | 数字 | 以字符个数设定的文本框的高度 |
| name | 字符串 | 多行文本框的名称 |
2.4a标签的使用方法
<a href="https://ww.baidu.com/">百度</a>
| 值 | 描述 |
| -blank | 在新窗口打开 |
| -self | 默认，在相同的窗口打开 |
| -top | 在整个窗口打开 |
| franmname | 在指定窗口打开 |
2.5表格的布局
表格的标签有，table，thread，tbody，tfoot，td，tr；表格边框的标签为border，表格的宽度为width，表格的高度为height，表格的对其方式为align标签有right，left，center；表格的背景颜色标签为bgcolor，background表示为背景图像，表格的边距标签为cellpadding，表格的间距标签为cellspacing
| 属性名 | 属性值 | 功能 |
| width | 数字 | 单元格的高度 |
| height | 数字 | 单元格宽度 |
| align | left center right（左中右） | 单元格水平对齐方式 |
| valign | top middle bottom（上中下） | 单元格垂直对齐方式 |
| bgcolor | 颜色 | 单元格的背景色 |
| rowspan | 数字 | 垂直方向的背景色 |
| colspan | 数字 | 水平方向跨列 |
<!DOCTYPE HTML>
<html lang="en">
<head><meta charest="UTF-8"><title>表格的布局</title>
</head>
<body>
<table width="400" border="1" cellspadding="0" cellspacing="0"><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td> <td></td></tr>
</body>
<html>其中表格中的tr与td也可以设置颜色，tr中的height表示行高，bgcolor用16进制表示；
表格中的行与列可以合并，rowspan=" "表示合并多少行；colspan=" "表示合并多少列
2.6照片的插入<img src="图片1".png" width=" " height=" " align=" ">其中src表示图片的位置可以文件中的，也是是绝对路径，width表示图片的宽度，height表示图片的高度，align表示图片的位置；放置音频则是<audio src=" " autoplay controls>其中的autoplay表示自动播放，放置视频则是<video src=" " autoplay controls>其中路径为绝对路径，
HTML的基础知识总结相关推荐
- 嵌入式Linux的OTA更新，基础知识和实现
嵌入式Linux的OTA更新,基础知识和实现 OTA updates for Embedded Linux, Fundamentals and implementation 更新的需要 一旦嵌入式Li ...
- 计算机基础知识第十讲,计算机文化基础（第十讲）学习笔记
计算机文化基础(第十讲)学习笔记 采样和量化PictureElement Pixel(像素)(链接: 采样的实质就是要用多少点(这个点我们叫像素)来描述一张图像,比如,一幅420x570的图像,就表示 ...
- 嵌入式linux编程,嵌入式Linux学习笔记 - 嵌入式Linux基础知识和开发环境的构建_Linux编程_Linux公社-Linux系统门户网站...
注:所有内容基于友善之臂Mini2440开发板 一.嵌入式Linux开发环境的构建 嵌入式开发一般分为三个步骤: 1.编译bootloader,烧到开发板 2.编译嵌入式Linux内核,烧到开发板 3 ...
- 《计算机网络应用基础》模拟试卷(六),《计算机与网络应用基础知识1》模拟试卷...
<计算机与网络应用基础知识1>模拟试卷 (4页) 本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦! 9.9 积分 <计算机与网络应用基础知识1& ...
- python向量计算库教程_NumPy库入门教程：基础知识总结
原标题:NumPy库入门教程:基础知识总结 视学算法 | 作者 知乎专栏 | 来源 numpy可以说是 Python运用于人工智能和科学计算的一个重要基础,近段时间恰好学习了numpy,pandas, ...
- python常用变量名_python基础知识整理
Python Python开发 Python语言 python基础知识整理 序言:本文简单介绍python基础知识的一些重要知识点,用于总结复习,每个知识点的具体用法会在后面的博客中一一补充程序: 一 ...
- 计算机基础知识掌握欠缺,《计算机基础知识》实验教学改革探讨.pdf
<计算机基础知识>实验教学改革探讨.pdf Science& TechnologyVision 科 技 视 界 科技 探·索·争鸣 计<算机基础知识>实验教学改革探讨 ...
- python计算wav的语谱图_Python实现电脑录音（含音频基础知识讲解）
前言 今天开始进入近期系列文章的第一篇,如何用 Python 来实现录音功能. 在开始"造轮子"之前,个人一直强调一个观点,如果有些东西已经有了,不妨直接去 github 上搜,用 ...
- 计算机wrod初级考试题及答案,计算机基础知识+Word基础知识+Excel基础知识试题答案解析.doc...
文档介绍: 计算机基础知识+ Word基础知识+ Excel基础知识 第一部分 一.单项选择题 1.世界上第一台电子数字计算机取名为( ). A.UNIVAC B.EDSAC C.E ...
- java 前端基础知识_【计算机·知识】关于前端的计算机基础知识
原标题:[计算机·知识]关于前端的计算机基础知识 作为一个刚刚入门的程序猿,你是否对专业知识有足够的了解?今天新闻君带你走进前端的世界. 前端的语言接触起来相对于后端的语言要容易不少,但前端的语言也有 ...
最新文章
- 搞懂Transformer结构，看这篇PyTorch实现就够了
- Java中String、StringBuffer和StringBuilder的区别
- table选项卡从A页面点击进入B页面指定版块
- python定界符有哪些_Python 开发中有哪些高级技巧？
- 我的手绘2013.01.27
- FlinkCdc从Mysql指定的binlog日志offsetPos位置开始读取数据
- easy connect无法连接到服务端_故障分析 | 一次因为超过最大连接数的登陆限制
- oracle安装后再建库,oracle-数据库的安装与建库
- numpy下载失败解决方法
- Web3世界的入口Wallet使用指南
- RKH81 键盘快捷键
- 【FreeRTOS】软件定时器的使用
- 正式进入Hadoop学习 不会再有比我还全面的大数据学习（三） Hadoop生态圈
- 十年一梦（炒股的经历）续
- ubuntu安装java17（学习）
- 机器学习与各种技术之间的关系
- 【Flink】Specifying keys via field positions is only valid for tuple data types.
- Google Bigtable论文翻译
- 云平台(cloud platforms)
- Word使用编码的方式实现第？页共？页(可自定义起始页和总页数)（步骤超级详细）