HTML整理

学习 HTML 最好的方式就是边学边做实验
html
HTML 元素指的是从开始标签到结束标签的所有代码,HTML 标签对大小写不敏感
 
块级元素在浏览器显示时,通常会以新行来开始(和结束)。
 例子:<h1>, <p>, <ul>, <table>,<div>
内联元素在显示时通常不会以新行开始。 
例子:<b>, <td>, <a>, <img>,<span> (元素可用于为部分文本设置样式属性)
html头部:
以下标签都可以添加到 head 部分:<title>、<base>、<link>、<meta>、<script> 以及 <style>。
{
<title> 标签定义文档的标题。
title 元素在所有 HTML/XHTML 文档中都是必需的。
        <!DOCTYPE html>
        <html>
        <head>
        <title>显示在搜索引擎结果中的页面标题</title>
        </head>
<base> 标签为页面上的所有链接规定默认地址或默认目标(target):
        <head>
        <base href=" http://www.w3school.com.cn/images/"; />
        <base target="_blank" />
        </head>
<link> 标签定义文档与外部资源之间的关系。
<link> 标签最常用于连接样式表:
        <head>
        <link rel="stylesheet" type="text/css" href="mystyle.css" />
        </head>
<style> 标签用于为 HTML 文档定义样式信息。
可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式:
html规范:
约定: 所有的html代码都需要保存在html 标签中
格式:

html注释:ctrl+/    <!-- 被注释的内容-->
<br/>代表是换行。
<hr/>:一条分割实线
 

 

超链接
 HTML 中的超链接
  • a是用来实现超链接,a的用法有
      • 创建连接,连接到另一个文档
      • a标签的href用来指定要连接的文档,如果连接的目标文档是当前站点的文件,使用相对路径,如果是其他站点的文件,使用绝对路径
    • 相对路径的解析原理
      • 相对路径分为
        • 相对根目录相对路径
        • 相对当前文档的的相对路径
    • a的target属性是用来设置在哪一个窗口打开目标文件
    • a标签的内容是用来给用户点击的,不能少,所有的可视元素都可以做a的内容
    • a标签不仅可以用来设置超链接,还可以用来创建命名锚记
      • 使用name属性来创建锚记
 
 
FONT标签
 

列表
ul和ol的子元素只能是li,   dl的子元素dt和dd
列表标签:3种
无序列表(ul)
属性:type   值:disc(默认,实心原点),square(实心方点),circle(空心圆)
格式:<ul>
<li>书写内容1</li>
<li>书写内容2</li>
<li>书写内容3</li>
</ul>
2.有序列表(ol)
属性: type   取值:1(阿拉伯数字,默认),a,A,i,I
格式:<ol>
  <li>书写内容1</li>
  <li>书写内容2</li>
  <li>书写内容3</li>
</ol>
3.定义列表(dl)
dt: 列表项的标题
dd: 列表项
格式:
<dl>
  <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
    <dd>名词1解释3</dd>
  <dt>名词2</dt>
    <dd>名词2解释1</dd>
    <dd>名词2解释2</dd>
    <dd>名词2解释3</dd>
</dl>
 
img标签
 两种写法:
  a) 相对路径  相对于页面所在的路径,两个标记 ./ 和 ../ 分表代表当前目录和父路径
    b) 绝对路径
       1)  以盘符开始的路径 eg: C:\Documents and Settings\Administrator\桌面\images/1.jpg
    2)  网络路径 eg: http://www.baidu.com/images
语法格式:<img alt="图片找不到显示的描述"  src="图片路径"/>
 
表格标签

表格由 <table> 标签来定义。

 

table,table的子元素有caption,thead,tbody,thead和tbody的子元素是tr,tr的子元素是td或th

 

使用边框属性来显示一个带有边框的表格:<table border="1">
如果某个单元格是空的(没有内容),浏览器可能无法显示出这个单元格的边框。浏览器可能会这样显示:

 

这个空的单元格的边框没有被显示出来。为了避免这种情况,在空单元格中添加一个空格占位符,就可以将边框显示出来:<td>&nbsp;</td>

 

 

 

表单标签

表单标签的主要功能:它是把表单中的数据提交给远端的服务器。
表单标签不是一个标签,而是一组标签。
                   <form>
                  子标签,子标签中的数据,会被提交给服务器。
                  </form>

 

form 属性:

1.action:表单提交的地址,即决定提交的位置(书写的具体的服务器的地址(URL))
2.method:表单提交的方式.
3.get提交:(默认) get 在浏览器地址栏中可以 看到
    1.将参数键值对拼装在Url地址之后.
    2.get提交安全性相对较差
    3.get提交参数长度有限
4.post提交:post 在浏览器地址栏不可以 看到
    1.参数不在Url上
    2.post提交安全性相对较好
    3.post提交理论上参数长度没有限制
5.输入标签:input
input标签是单标签,<input/>
type属性:决定输入的类型 ;name属性:提交的键;value属性:name对应的值;size属性:文本输入框的显示长度;maxlength属性:限制文本框输入长度;readonly:只读.不可修改文本内容.会提交;disabled:禁用.被禁用的表单项不会被提交. 所有input都可以使用 
注意:
  1.提交给服务器的参数是以键值对的形式提交的(name=value),如果不指定name属性就不会提交到服务器的;
  2.如果type的值是需要输入的文本类型,比如text和password,只需要name属性即可,value属性的值是我们输入的内容;
  3.如果type的值是需要选择的文本类型,比如radio和checkbox,同时需要name和value属性,才会提交到服务器中;
  4.对于同一组的内容,比如使用radio来表示性别,必须用相同的name属性的值来将其绑定为一组,checkbox也是这样;
6.下拉框标签:select
select标签是成对出现的,以<select>开始,以</select>结束 
此标签中的每对option标签代表一个选择项
注意:一般要在select中写name属性,在option中写value属性
select标签属性: 
  name -- 表单项名称 ;size -- 选择域的高度 ;multiple -- 可以有多个选择 ; option 标签 -- 代表选择列表的一个选择项 ,option标签是成对出现的,以<option>开始,以</option>结束
属性:  value -- 说明选择项的值 ;selected -- 此选择项已经被选择
7.文本域标签:textarea
属性:
name:提交的键名称,输入的内容为value值;disabled:禁用;readonly:只读
注意:表单标签的所以标签都没有自动换行的功能,需要自己换行;

转载于:https://www.cnblogs.com/flyingLcode/p/7680135.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值