基础知识

HTML是超文本标记语言，主要用处是做网页，可以再网页上显示文字、图像、视频、声音等。

HTML的结构包括头部（head）、主体（body）两大部分，其中头部描述浏览器所需的信息，主体保护所要说明的具体内容。

HTML可以编写静态网页。

基本结构：

<html>

</html>

html标签

Html中标签一般成对出现，分开始标签和结束标签。结束标签比开始标签多了一个/。

标签与标签之间可以嵌套，但前后顺序必须保持一致。

标签不区分大小写。

常见的html标签：

※

※ <head></head> ——通常用来嵌套meta、title、style等标签

<title>网页的标题</title>

※ <p>段落文本</p>

※ <hx>标题文本</hx> (x为1-6) ——h1标签字号最大

※ <span>文本</span> ——span标签没有语义，主要作用是为了设置单独的样式。

如<span color:blue>文本</span>

※ <header>头部标签</header> ——用来定义头部区域

※ <section>区域</section> ——用来定义一个区域

※ <footer>底部标签</footer> ——用来定义底部区域

※ <aside>侧边栏</aside> ——用来定义侧边栏区域

※ <br> ——换行（html4.01写法）

<br /> ——换行（xhtml1.0写法）

※   ——空格

※ <hr> ——水平分割线（html4.01写法）

<hr /> ——水平分割线（xhtml1.0写法）

注：现在一般使用 xhtml1.0 的版本的标签，这种版本比较规范

※ 无序列表——ul、li

<ul>

</ul>

※ 有序列表——ol、li

<ol>

</ol>

※ 图片——img

<img src="图片地址" alt="图片不可见时，显示的替换文本" title = "图片可见时，鼠标滑过图片时显示的提示文本">

※ 超链接——href

<a href="目标网址" title="鼠标滑过时显示的文本" target=”打开网页的方式”> 链接显示的文本 </a>

Target可选值：_self（在当前页面打开链接）和_blank（在新窗口打开链接），默认为_self

※ 表格——table

创建表格的四个元素：table、tr、th、td（均为双标签）

table用来定义整个表格，table标签可以放caption（定义表格的标题）和tr（表格的行）标签

tr标签只能放th（设置标题，加粗居中显示）和td标签（表示表格的列），一组tr标签代表一行

例如：

<html>
<head><meta charset="UTF-8"><title>学习表格标签</title>
</head>
<body><table border=1px><caption>前端三剑客</caption><tr><th>知识点</th><th>重要程度</th><th>难度</th><th>学习周期</th></tr><tr><td>html</td><td>5星</td><td>3星</td><td>7天</td></tr><tr><td>css</td><td>5星</td><td>4星</td><td>10天</td></tr><tr><td>js</td><td>5星</td><td>5星</td><td>20天</td></tr></table>
</body>
</html>

结果：

定义表格的三个区域：thead、tbody、tfoot（均为双标签，与tr、th、td结合使用）

<thead>用于定义表格头部

<tbody>用于定义表格的内容

<tfoot>用于定义表格的底部

注：如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。

例如：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>使用thead、tbody、tfoot标签</title>
</head>
<body><table border=1px><thead><tr><th>科目</th><th>分数</th></tr></thead>  <tbody><tr><td>语文</td><td>99</td></tr><tr><td>数学</td><td>60</td></tr></tbody> <tfoot><tr><td>总分</td><td>159</td></tr></tfoot></table>
</body>
</html>

结果：

※ 表单——form

form表单是可以把浏览器输入的数据传送到服务器端，这样服务器端的程序就可以处理表单传过来的数据。

<form action="服务器文件" method="传送方式" ></form>

action：浏览者输入的数据被传送到的地方

method：数据的传送方式（post/get）

表单控件：text（文本输入框）、password（密码输入框）、number（数字输入框）、url（网址输入框）、email（邮箱输入框）、radio（单选框）、checkbox（复选框）、submit（提交）、reset（重置）

<input type="text / password / number / url / email / radio / checkbox " name="名称" value="文本" />

name：文本框命名，便于后台程序调用

value：文本框设置的默认值（一般起提示作用）

placeholder：输入框占位符，用来放提示信息。在value为空时才会显示，但他不是value，也不会被表单提交

number：数字输入框，只能输入数字

url：网址输入框, 需以http://或者https://开头，且后面必须有内容

email：邮箱输入框，需包含@，且@之后必须有内容

textarea：文本输入域，格式：<textarea rows="行数" cols="列数"> 文本 </textarea>

lable：laber标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

<label for="控件id名称"></label>

例如：

<label for="pass">请输入密码</label><input type= "password" id="pass" placeholder="Enter password">

radio：单选框

checkbox：复选框

<input type="radio/checkbox" value="值" name="名称" checked="checked"/>

checked：当设置 checked="checked" 时，该选项被默认选中

同一组的单选按钮，name 取值一定要一致，才能保证单选

例如：

   <form action="save.php" method="post"><label>性别:</label><label>男</label><input type="radio" value="1" name="gender" /><label>女</label><input type="radio" value="2" name="gender" /></form>

结果：

select、option：下拉菜单

select标签里面只能放option标签，表示下拉列表的选项。

option标签放选项内容，不放置其他标签。

设置selected="selected"属性，则该选项就被默认选中。

例如：

    <form><select><option value="看书">看书</option><option value="旅游" selected="selected">旅游</option><option value="运动">运动</option><option value="购物">购物</option></select></form>

HTML基础教程笔记相关推荐

python基础教程笔记—即时标记（详解）
最近一直在学习python,语法部分差不多看完了,想写一写python基础教程后面的第一个项目.因为我在网上看到的别人的博客讲解都并不是特别详细,仅仅是贴一下代码,书上内容照搬一下,对于当时刚学习py ...
阮一峰：jQuery官方基础教程笔记
原文地址:http://www.jobbole.com/entry.php/1151 jQuery是目前使用最广泛的javascript函数库. 据统计,全世界排名前100万的网站,有46%使用jQu ...
pytho基础教程笔记（7-9）（类、递归、生成器）
第七章更加抽象类和类型类概念: __metaclass__=type # 确保类是新版的 class Person:def setName(self, name):self.name = na ...
Cytoscape基础教程笔记
昨天开始学用Cytoscape,其tutorial分为两个部分,基础的和高级的.基础教程又分成了四课:Getting Started.Filters & Editor.Fetching Ex ...
绘制对象iPhone开发基础教程笔记
每日一贴,今天的内容关键字为绘制对象 1. 虚拟内存 iPhone OS其实不会将易掉性内存(如应用程序数据)写到交换文件,因此应用程序可用内存量将受到更多的制约. Cocoa Touch供给一种内置 ...
MongoDB基础教程笔记
视频教程:https://www.bilibili.com/video/BV18s411E78K?share_source=copy_web 基于 MongoDB 4.4.3 环境:Windows 1 ...
iPhone开发基础教程笔记（十二）--第十二章使用Quartz和OpenGL绘图
第十二章使用Quartz和OpenGL绘图有时应用程序需要能够自定义绘图.一个库是Quartz 2D,她是Core Graphics框架的一部分:另一个库是OpenGL ES,她是跨平台的图形库. ...
尚硅谷python核心基础教程笔记-第一章计算机基础知识
第一章计算机基础知识(视频1-10) 课程介绍课程名称:Python基础视频教程讲师:尚硅谷教育,李立超(lichao.li@foxmail.com) 面向的层次:From Zero to He ...
JavaScript基础教程笔记
01.尚硅谷_JS基础_JS简介 02.尚硅谷_JS基础_JS的HelloWorld //控制浏览器弹出一个警告框 alert("这是我的第一行JS代码"); //让计算机在页面中 ...

HTML基础教程笔记

基础知识

html标签

HTML基础教程笔记相关推荐

最新文章

热门文章