我的ASP.NET学习笔记01HTML基础

HTML基础一、 <font></font>字体通常在网页中我们尽量使用宋体,黑体,微软雅黑(win7以上)这些字体。因为这些字体通常是操作系统自带的。如果我们使用了计算机上不存在的字体,那么计算机将使用默认字体,一般是宋体。 二、 color属性(十六进制数值表示123456789abcdef设置字体颜色计算机中通常使用RGB三种(红色,绿色,蓝色)颜色,是由三种颜色的数值来调颜色深浅。每一种颜色数值都是由0到255(最大值255表示为ff)之间的数值来表示,0是最暗颜色(黑),255是颜色最浓(红)。(十六进制)当着三个数值转化为十六进制的数时,它就是00到ff之间的十六进制数,然后按照RGB红绿蓝的顺序,依次排列这六个数字,就形成了类似#ff0000的样子。比如:红色(r=255,g=0,b=0)转换为十六进制:#红色255表示:ff,绿色为0:00,蓝色为0:00.结果就显示为#ff0000.快速取色可以去PS中调色板点击颜色,就可显示该颜色的十六进制代码。三、 文字的变体
<b>代表其中的内容用粗体显示

<i>代表其中的内容用斜体显示

<U>代表其中的内容下方添加下划线

<sup>代表其中的内容作为上标来显示(比如平方)

<sub>代表其中的内容作为下标来显示(比如化学元素)

<em>强调,显示效果与<i>相同

<strong>加强,显示效果与<b>相同
四、 特殊符号   空格(三种输入空格的方式:一。 ;二。
按文本格式显示三。使用全角空格,调试格式方便,但是不正规。)<     <>     >&   &";   <img>图像img图像标签可以帮助我们在网页中插入图片src属性:文件所在的地址文件名。width属性:图片的宽度height属性:图片的高度title属性:图片的标题与说明。当鼠标移动到图片上时显示说明。alt属性:当图片由于路径或网速问题显示错误(无法显示)时,会出现的替换文字。align属性:让图片居左或居右,但是不能居中。(align在dreamweaver中是没有代码提示的。)五、 图文混排:html中的图文混排,是通过图片的的align属性实现的。否则图片不可能与多行文字处于同一行中。备注:图片的宽度与高度的单位是像素(即屏幕上最小的一个发光点),像素用PX表示。六、 相对路径与绝对路径相对路径是指相对自身文件所在的另一个文件或文件夹的位置,所要到达的路径。一. 当路径中只有一个文件名时,说明我要找的这个文件与当前的网页文件存在同一个文件夹中。二. 当另一个文件所处于当前网页文件所在目录的子文件夹中时,在书写路径时要指明所在的位置。格式为:“子目录名/文件名”。当文件处于当前网页文件所在的目录的子文件夹的子文件夹中时,其书写格式为:“一级子目录名/二级子目录名/文件名”。以此类推。三. 当一个文件处于当前网页文件的父文件夹时,其书写格式为“../”,当一个文件处于当前网页文件的父文件夹的父文件夹时,其书写格式为”../../”。”/”用作划分目录。七、 绝对路径代表一个文件在计算机上存储的位置。 八、 常见图片文件格式:jpg,jpeg(二者没什么区别,都是压缩图片格式,有一定失真,变模糊)png(fireworks的图片格式,可以包含图层,它可以在尽量不损失图片清晰度的情况下压缩图片的容量)gif(可以用于显示一些色彩较为简单的图案,以及动画)png和gif是支持透明背景的 ,jpg和jpeg都不支持透明。bmp(通常不用到网页中,文件较大且不压缩)  HTML基础HTML概述九、 静态网页与动态网页所谓静态网页,就是有HTML+javascript组成的网页,静态网页之中不包括任何服务器的动态语言。静态网页的修改与制作完全由开发者手动完成。html、css、javascript都是由浏览器来执行的。(浏览器:IE,firefox,chrom,oprea是真正拥有自主研发内核的浏览器。)注意:每个浏览器打开的同一个网页可能会出现差异,网页制作注意校准各种浏览器的差异 网页扩展名:html、htmshtml、shtm、asp……(html与htm没区别,只是名字不同。早起操作系统文件扩展名只能有三个字母,所以为htm。 而在windows操作系统中,扩展名可以是多个字母,因此才有了html。其实二者没什么区别。)扩展名:区分各个文件的种类十、 Html标签
  • 有时也称为html标记、元素,所有html标签都是写在<与>之中。
  • Html的标签必须成对出现(有开始有结束)第一个<html>表示开始了然后是内容,最后是</html>。
  • 通常结束标签与开始的单词相同,但是单词前面有一条“/ ”
  • 网页就是由html标签与文本内容构成的。HTML基础语法一、 <html>一个网页文件中,所有的网页代码都必须放在html的开始标签和闭合标签中间,闭合区间要在单词前加/。二、 <head>就是一个网页的头部,其中放置的是这个网页的参数及配置信息,比如:我是网页的标题三、 <body>用来放置网页的正文,网页中所有需要显示的正文内容都是包含中<body>标签中的。 注意标记的下一级,只能包含<head>和<body>。 四、 Html注释仅仅是一个说明或标注,并不会作为正文显示出来。语法:大小余符号加感叹号加左右两个减号。五、 标题:语法:
    <h1>标题一</h1>
    
    <h2>标题二</h2>
    
    <h3>标题三</h3>
    
    <h4>标题四</h4>
    
    <h5>标题五</h5>
    
    <h6>标题六</h6>
    六、 Html排版html源代码中,我们输入的回车并不会在页面上起到换行的作用。如果需要换行,必须通过

    段落
    换行。等其他html标签实现。
  • <p>表示段落标记,功能就是包含一段文本,并让其以段落的格式显示,有行间距,要成对出现。
  • <br/>表示换行符,是break的缩写。没有两行的间距,相当于输入一个回车。实际意义上被中断的文本任然是同一行,只是显示不同。单个存在,后面加/.
  •  
  • <pre>按原格式显示
  •  让其中包含的文本按照html源代码中书写的格式显示,包括回车、空格,TAB制表符都将会被显示出来。HTML基础十一、 <font></font>字体face通常在网页中我们尽量使用宋体,黑体,微软雅黑(win7以上)这些字体。因为这些字体通常是操作系统自带的。如果我们使用了计算机上不存在的字体,那么计算机将使用默认字体,一般是宋体。 十二、 color属性(十六进制数值表示123456789abcdef)设置字体颜色计算机中通常使用RGB三种(红色,绿色,蓝色)颜色,是由三种颜色的数值来调颜色深浅。每一种颜色数值都是由0到255(最大值255表示为ff)之间的数值来表示,0是最暗颜色(黑),255是颜色最浓(红)。(十六进制)当着三个数值转化为十六进制的数时,它就是00到ff之间的十六进制数,然后按照RGB红绿蓝的顺序,依次排列这六个数字,就形成了类似#ff0000的样子。比如:红色(r=255,g=0,b=0)转换为十六进制:#红色255表示:ff,绿色为0:00,蓝色为0:00.结果就显示为#ff0000.快速取色可以去PS中调色板点击颜色,就可显示该颜色的十六进制代码。十三、 文字的变体
    <b>代表其中的内容用粗体显示
    
    <i>代表其中的内容用斜体显示
    
    <U>代表其中的内容下方添加下划线
    
    <sup>代表其中的内容作为上标来显示(比如平方)
    
    <sub>代表其中的内容作为下标来显示(比如化学元素)
    
    <em>强调,显示效果与<i>相同
    
    <strong>加强,显示效果与<b>相同
    十四、 特殊符号   空格(三种输入空格的方式:一。 ;二。
    按文本格式显示三。使用全角空格,调试格式方便,但是不正规。)<     <>     >&   &";   <img>图像img图像标签可以帮助我们在网页中插入图片src属性:文件所在的地址文件名。width属性:图片的宽度height属性:图片的高度title属性:图片的标题与说明。当鼠标移动到图片上时显示说明。alt属性:当图片由于路径或网速问题显示错误(无法显示)时,会出现的替换文字。align属性:让图片居左或居右,但是不能居中。(align在dreamweaver中是没有代码提示的。)十五、 图文混排:html中的图文混排,是通过图片的的align属性实现的。否则图片不可能与多行文字处于同一行中。备注:图片的宽度与高度的单位是像素(即屏幕上最小的一个发光点),像素用PX表示。十六、 相对路径与绝对路径相对路径是指相对自身文件所在的另一个文件或文件夹的位置,所要到达的路径。四. 当路径中只有一个文件名时,说明我要找的这个文件与当前的网页文件存在同一个文件夹中。五. 当另一个文件所处于当前网页文件所在目录的子文件夹中时,在书写路径时要指明所在的位置。格式为:“子目录名/文件名”。当文件处于当前网页文件所在的目录的子文件夹的子文件夹中时,其书写格式为:“一级子目录名/二级子目录名/文件名”。以此类推。六. 当一个文件处于当前网页文件的父文件夹时,其书写格式为“../”,当一个文件处于当前网页文件的父文件夹的父文件夹时,其书写格式为”../../”。”/”用作划分目录。十七、 绝对路径代表一个文件在计算机上存储的位置。 十八、 常见图片文件格式:jpg,jpeg(二者没什么区别,都是压缩图片格式,有一定失真,变模糊)png(fireworks的图片格式,可以包含图层,它可以在尽量不损失图片清晰度的情况下压缩图片的容量)gif(可以用于显示一些色彩较为简单的图案,以及动画)png和gif是支持透明背景的 ,jpg和jpeg都不支持透明。bmp(通常不用到网页中,文件较大且不压缩) 网页背景
  • 添加背景色:在<body>中写入bgcolor属性(<body bgcolor=”颜色代码”>)
  • 添加背景图:在<body>中写入background属性+图片位置。(<body background=”图片位置”>)
  • 网页的背景图片通常是会按照网页的内容自动重复出现,它始终会填满整个页面。十九、 语法:二十、 
    <a href="index.html"><img src="../image/logo.jpg" class="logo" />
    <a href=”mailto+邮箱地址”>显示的邮箱地址</a>
    注:mailto是邮箱协议,http是网页协议。二十一、 
    迅雷下载:<a href=”thunder(协议)://QUFodHRwOi8veHh”>文件下载</a>
    
    普通下载:<a href=”file(文件)://asgfsadf.rar”>普通文件下载</a>
    二十二、 锚点(书签)就是在当前网页中进行定位,点击锚点之后,浏览器屏幕会自动跳转到锚点所制定的内容所在处。在制定位置插入锚点,是通过标签的ID属性实现的:

    第一章通过点击锚点跳转到本页面制定的位置:

    <a href=”#a1”>第一章</a>
    表格与列表html中表格的内容必须放在
    之中。二十三、 表格的行:<tr></tr>(table row的简写)在表格之中里的内容也就是代表是一行中的内容。里的内容也就代表一个单元格中的内容。二十四、 表格中元素的嵌套顺序
  • 一个表格中的所有内容都必须放在<table></table>中
  • <table>标签所包含的下一级,不能是<td>,只能是<tr>或<thead><tbody><tfoot>,
  • <td>必须被包含在<tr>中,<tr>必须被包含在<table>中。(层级必须遵循,不然会出错)。
  • 二十五、 表格的高度和宽度表格的整体高度和宽度分别由标签的height和width属性实现,默认单位是像素。
    语法:<table border="1"height="200px"width="400">
    表格的部分高度与宽度分别由标签的高宽度,此法无效)二十六、 表格边框通过在<table border=”1”border-color=”#cc0000”>其中border-color属性是指边框颜色,border是指边框线宽度。二十七、 表格背景色表格的整体背景色:
    标签的height与width属性实现,但是部分表格改变会影响整个表格的样子,改变的高度与宽度会改变所在单元格的其他表格。因此,如果我们想要改变行与列的高度宽度,只需要改变第一个单元格的高度与宽度即可。(不要去修改
    的bgcolor属性。表格中一行的背景色:de bgcolor属性。表格中一个单元格的背景色:
    的bgcolor属性。二十八、 表格的间距Call是单元格的意思外边距单元格与单元格之间的距离,cellspacing内边距(内填充)单元格的边框与内容之间的距离。Cellpadding二十九、 合并单元格横向合并通过的colspan来实现,属性值是正整数,代表跨越多个列,也就是占几列的位置。纵向合并通过的rowspan现,属性值是正整数,代表跨越多个行,也就是占几行的位置。注意当实现单元格合并之后,要删除多余的,因为colspan与rowspan会占用多个单元格的位置。单元格拆分实际上仍然是通过合并来实现的,比如:当我们要将一个单元格拆分成两列时,指定的单元格会由一个变为两个,而在这个单元格原本所在列上的其他单元格都会添加一个clospan=”2”,由此实现了单元格的拆分。其本质上仍然是合并操作。三十、 表格内容对齐的align属性实现,其属性值有三个:left居左,right居右,center(居中)垂直方向对齐的valign属性实现,其属性值有三个:top(顶部),middle(中间),bottom(底部)三十一、 序列有序序列(有数值)序列中所有内容都必须放在
      中,序列中每一项都必须放在<li></li>中:比如:
      <ol>
      
      <li>苹果</li>
      
      <li>李子</li>
      
      <li>香蕉</li>
      
      <li>西瓜</li>
      
      <li>桃子</li>
      
      </ol>
      无序序列(有图标)序列中所有内容都必须放在
        中,序列中每一项都必须放在<li></li>中:比如:
        <ul>
        
        <li>苹果</li>
        
        <li>李子</li>
        
        <li>香蕉</li>
        
        <li>西瓜</li>
        
        <li>桃子</li>
        
        </ul>
        三十二、 表单<form>输入表单用于存放和提交一个网页中用户用于填写的数据的html标签。也就是说,用户填写数据的功能标签与数据都必须处于表单之中,也就是
        标签的开始与结束标记之间。<form>的属性:Action(开始):意义就是将表单中的数据提交到某个位置(通常是服务器的一个程序文件的地址)形象的说,就是发信的收件人地址。Method(提交方式):它的属性只有两个(二选一)“post”“get”以Get方式提交表单数据时,数据会被存放在网址后面,与网址一起显示出来,安全性不足。post方式提交数据时,数据是不可见的,安全性好,但是网址数据信息不会被存储,不便于保存信息,下一次要重新输入数据,不方便。 单行文本框
        语法:<input type=”text”/>单行文本框
        属性:Name :用于区分不同的表单元素Value :用于当用户还没有输入时,文本框内出现的值。Maxlength :最多输入的字符数Size :输入信息的文本框宽度。Readonly :只读,当其属性值为readonly时,文本框的内容不可改变。Disabled :当其属性是disabled时,文本框呈灰色状态,不可使用。 密码框password(属性基本与单行文本框类似)
        语法:<input type=”password”/>单行文本框
        属性:Name :用于区分不同的表单元素Value :用于当用户还没有输入时,密码框内出现的值。Maxlength :最多输入的字符数Size :输入信息的文本框宽度。Readonly :只读,当其属性值为readonly时,密码框的内容不可改变。Disabled :当其属性是disabled时,密码框呈灰色状态,不可使用。单选框在一组多个选项中只能有一个被选中。
        语法:
        
        <input name=”sex” type=”radio” value=””/>
        注意: 多个单选框,只有当他们的name名称一致是才会被识别成一组。一组中只能有一项被选中。属性:Name:名称(组名)Value:被选中时的数值(如:男,女;对,错)Checked:当其属性值为“checked”的时候,会默认选中该单选框。复选框就是可以同时选中多个选项。选中后方框中出现一个“对钩”语法:
        下棋<input type=”checkbox” value=”” name=”fav”/>
        按钮可点击后会激活一段脚本程序。写法:
        <input type=”button”value=”按钮”
        属性:Value:就是在按钮上显示的文字。 提交按钮当点击提交按钮时,实际上就是将
        表单中整个数据提交传送到action属性指定的地址去,并且浏览器打开这个地址。写法:
        <input type=”submit” value=”用户注册”
        属性:Value:就是按钮上显示的文字。重置按钮就是清空整个表单中用户所填写的数据。写法:
        <input type=”reset” value=”重新填写”/>
        多行文本框就是一个可输入大量文本的输入区域。写法:
        <textarea cols=”100” rows=”10”>请输入您的心情日记</textarea>
        Cols:文本框宽度Rows:文本框高度默认内容:在textarea开始标签与结束标签之间的内容,会作为多行文本框的默认内容显示出来。下拉菜单/列表提供多个选项让用户选择。写法:
        <select name=”address” size=”5” multiple=”multiple”>
        
        <option value=”重庆”>重庆</option>
        
        <option value=“四川”>四川</option>
        
        </select>
        其中,列表中选项,必须包含在相同,唯一不同之处仅仅是它的显示是一张图片。 

        相关内容推荐

        Copyright © EchoJb.com