html笔记

不成对出现的标签 <br> <hr> <meta><img><input..><option..><link>

<p>标签  段落标签    <h1>--<h6>仅仅用于标题文本,

<strong>   用于强调文本 强度更深 表示重要文本  <b>标签  视觉加粗效果 单纯为了产生加粗  

<em>用于强调文本  <i>只是视觉斜体效果  <strong>比<em>强调更强

&nbsp; —->空格  &gt—>大于号   &lt—>小于号  &quot—>大于号

<span>对被用来组合文档中的行内元素  当对它应用样式时,才会产生视觉上的变化

<pre>文字的格式按源码的排版来显示,我们称之为预处理格式

<a>他有一个必不可少的属性 href

target属性  _self(在原来页面打开)  _blank(新窗口打开)

_top(打开时忽略所有的框架)_parent(在父窗口中打开)

创建锚点和锚链接

锚点也是一种超链接,是页面内进行跳转的超链接

第一步:创建锚点  <a  name = “锚点名称”></a>

第二步:使用创建好的锚点名称 <a href="#锚点名称">内容</a>

常见图片格式jpg png  gif    Gif只支持全透明)Jpeg/jpgPng半/全透明都支持

图片标签写法 :<img src=""  alt=""  width=""  height=""/> 

图片四要素:

src=""图片路径

alt="图片含义"

width=""图片宽度 和图片大小保持一致

height=""图片高度 和图片大小保持一致

title=""

路径知识:

相对路径、绝对路径:

相对路径:(Relative Path) 相对于该文件的路径;

绝对路径:(Absolute Path) 从磁盘出发的路径;

<img src=" ".....align=""/> align属性–设置图片与后面文字的位置关系

值–top、bottom、middle、absmiddle、left、right

/开头表示根目录;

./表示当前目录;(斜画线前面一个点)

../上级目录;(斜画线前面两个点)

直接用文件名不带/也表示同一目录

这些都是相对于当前文件的位置来说的,如果用绝对路径的话就是写全了。

  <ul> 无序列表

无序列表是一个没有顺序项目的列此列表项默认粗体圆点进行标识

<ol>有序列表

有序列表也是一列项目,只是列表项目使用的是数字进行标记。 有序列表始于<ol>标签。每个列表项始于<li>标签

无序列表-列表符号:

type="circle"空心圆type=“disc”实心圆 默认值type="square"方块符

有序列表-列表符号

type="A" A B C D

type="a"  a b c d

type="1" 1 2 3 4  默认值

type=”I” I II III  type=”i” i ii iii  罗马数字标识

定义列表以 <dl>标签开始 每个定义列表项以 <dt>开始 每个自定义列表项的定义以 <dd>开始 

<dl></dl>用来创建一个普通的列表,

<dt></dt>用来创建列表中的上层项目,

<dd></dd>用来创建列表中最下层项目,

<dt></dt>  和<dd></dd>都必须放在<dl></dl>标志对之间

<form>表单标签

<form>

<input type ="text"/>

</form>

<form action=“html.do" method="get">

        username: <input type ="text" name="users"/>    

        <input type="submit" value="提交"/>

</form>

<input>标签的掌握

 常用type类型:<input type="" name="" value=”“/>

type="text"单行文本输入框

type="password"密码(maxlength="")

type="radio"单项选择(checked="checked")

type="checkbox"多项选择

type="button"按钮

type="submit"提交type="image"图片提交

type="file"上传文件

type="reset"重置

type="hidden"隐藏

<lable>元素不会向用户呈现任何特殊效果。标签的for 属性应当与相关元素的 id属性相同。

<lable for="male">男: </lable> <input type="radio" name="sex" id="male"/>

<lable for="nv”>女:</lable><input type="radio" name="sex"  checked="check">

<textarea>文本域标签    rows表示这个文本域有多少行   cols表示这个文本域有多少列

<select>

<form>

     <select name="" id="">

     <option value="1">1月</option>

      </select>

</form>

<table>的border属性不能少

<tr>可以定义表格中的一行 

<td>  表示一个单元格

border-collapse属性设置是否将表格边框折叠为单一边框:

border-collapse:collapse;

colspan左右合并

rowspan上下合并

第一部分总结:

非可视化标签:headmetastylescrpit...

可视化标签:imgdivspanaulli…

只有可视化标签,才能用css改变它

单标签:metalinkbaseimginputbrhr

双标签:htmlheadbodydivapspan..ullioldl….

常用可视化标签

div

一般用它来布局

a超链接标签

href*属性:设置跳转的网页地址

target属性:设置跳转的目标

结论:凡事页面可以点击跳转或者表单提交的文字,都用a标签

img

src*属性用来设置图片的url数据

alt提供给搜索引擎搜索的

width

height

结论 :显示图片

ul li

列表

结论:只要将来设计页面中有固定样式的列表,就用ul和li

tablecaptiontrtd (th)

慢慢已经被淘汰了 被ul li代替

如果是合并竖排的就是合并行(rowspan)

如果是合并横排的就是合并列(colspan)





最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、html:超文本标记语言(Hyper text make up language)(1)、html不是一种编程...
    达达记阅读 737评论 2 2
  • <! Doctype html>声明文档类型 向搜索引擎表示该页面是html语言,并且语言为英文网站,其"lang...
    深眸灵瞳阅读 1,012评论 1 1
  • html HTML的相关定义 什么是HTML? HTML是负责描述文档语义的语言 HTML的语言特征 HTML是以...
    f550c7326662阅读 261评论 0 2
  • 什么是浏览器 常见主流浏览器有5种: IE、谷歌、火狐、Safarri、欧朋; 浏览器主要有2个功能 1:将网页渲...
    Sky_Boss阅读 636评论 0 0
  • Html是一种超文本标签语言,他并不是一种编程语言. 最基本的标签 我们使用编辑器创建html文件的时候通常都会给...
    相关函数阅读 282评论 0 1