最近在学HTML,记录一些笔记

WEB标准:

w3c组织  结构+样式+行为(HTML+CSS+JS)

初识HTML
        HTML概述:超文本标记语言
        超文本:在文本的基础上添加了一些动画、图片、音频、视频等等。

最新申明头:<!DOCTYPE html>
指定HTMl解析编码:<meta charset="UTF-8">(嵌套在head里面)
编码:(有兴趣可以上网扩展知识)
ansi
unicode
utf-8
gbk
gb2312
gb18030

HTML基本骨架:

<html>
<head>
<title></title>
</head>
<body>
</body>

</html>

标签分类:
双标签  <标签名>内容</标签名>

单标签  <标签名 />

标签关系:
嵌套关系 (父子关系)如:<head><title></title></head>

并列关系 (兄弟关系)如:<head></head><body></body>

H系列标签:<h1></h1>
给页面上的文字加上标题的语义。

特点:将文字放大,加粗并且逐渐变小。(h1标签是最大的,一个页面上只有一个h1标签)

P标签:<p></p>
给页面上的一段文字加上段落的语义。

特点:单独占一行,并且与上下内容之间存在距离。

hr标签:<hr>

        水平分隔线(单标签)

br标签:<br>

        换行标签(单标签)

文本格式化标签:<b></b>等
strong em  ins          del  (建议使用)
b         i  u         s (认识即可)

粗体  斜体 下划线 删除线

标签的属性:
属性就是特性。
在制作网页的时候,如果想让HTML标签提供更多的信息,可以使用标签的属 性加以设置。
语法:
<标签名 属性1=“属性值1” 属性2= “属性值2” …>内容</标签名>
注意点:
标签可以有多个属性,必须写在开始标签中,位于标签名后面。
属性之间不分先后顺序,标签名与属性之间均用空格分开。
任何标签的属性都有默认值,省略该属性则取默认值。

采用键值对的格式,key=“value”的格式。

图片标签 :
<img src="图片路径" alt="图片显示失败时的替换文本" title="悬停提示" border="边框" />
        注意:宽、高一般只设置一个,图片会自动缩放。

链接标签 :
<a href="地址" target="跳转页面的打开方式" >显示的内容</a>
锚标记:<a href="#我在这">、<p id="我在这">你在找我?</p>

base标签 :
<base target="_blank" />统一设置跳转页面的基本打开方式

注释标签 <!-- 我被注释掉了 -->

路径
相对路径:
1、图片和HTML文件位于同一级文件夹
<img src="meinv.jpg" />
2、图片位于HTML文件的下一级文件夹
<img src="下一级文件夹/meinv.jpg" />
3、图片位于HTML文件的上一级文件夹
<img src="../路径.jpg" />

href="图像链接.html"

绝对路径:C:\Users\chend\Desktop\HTMLv81预习班\day02\案例
http://ww.baidu.com

iframe:
<a href="http://www.baidu.com" target="myIframe" target="myIframe">百度</a>
<a href="http://www.sina.com.cn" target="myIframe" target="myIframe">新浪</a>
<br />

<iframe name="myIframe" width="500" height="500"scrolling="no"  frameborder="1"> 
        </iframe>
        a和iframe通过target、name的值关联起来。
        局部刷新:只刷新页面中的某一个地方,不影响其他。
        scrolling:滚动条是否显示(yes\no\auto)frameborder:是否有边框(0\1)

列表
ul标签:无序列表
ol标签:有序列表
dl标签:自定义列表
li标签:容器,可以放别的标签

无序:
<ul>
<li></li>
                <li></li>
</ul>

有序:
<ol>
<li></li>
                <li></li>
</ol>

自定义:
<dl>
<dt>项名称1</dt>
<dd>描述1</dd>
<dt>项名称2</dt>
<dd>描述1</dd>
<dd>描述2</dd>

<dl>

table 表格:
将数据以表格的形式展示出来
语法:
<table>
        <caption> 
            <h3></h3>
        </caption>
        <thead>
            <tr>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td></td>
            </tr>
        </tfoot>

    </table>

table:表格
caption:表格标题(居中、位于表格正上方)
tr:行
th:头部单元格(居中、默认加粗)
td:单元格
thead:表格的头部
tbody:表格的主体(不写时浏览器会自动加)
tfoot:表格的底部
colspan:列合并
rowspan:行合并
cellspacing:边框与边框之间的距离(注意:值为0时边框并列)
cellpadding:内容与边框的距离(注意:四个方向都有)
border:边框
合并单元格占位问题:列合并时从左到右,行合并时从上到下,多余的单元格要删掉。
 

firebug:浏览器调试。右键->检查或者F12(Elements是HTML代码区可以直接双击或者右键Edit as HTML编辑HTMl即时在页面看到效果)

HTML编辑器:
    *Sublime(轻量级)自带的功能不全,但是插件是十分丰富【重点】
    dreamweaver 偏向于设计

    Webstrom(重量级) 自带功能比较全面

sublime下载网址:https://www.sublimetext.com/3
sublime常用快捷键:
ctrl+n 新建文件
ctrl+s 保存文件(注意:要写后缀名)
ctrl+shift+d 复制一行
ctrl+shift+k 删除一行
ctrl+shift+↑ 向上移动一行
ctrl+shift+↓ 向下移动一行



*Sublime(轻量级)自带的功能不全,但是插件是十分丰富【重点,软件以及现阶段插件安装文档在群文件有】
dreamweaver 偏向于设计
Webstrom(重量级) 自带功能比较全面

*Sublime(轻量级)自带的功能不全,但是插件是十分丰富【重点,软件以及现阶段插件安装文档在群文件有】
dreamweaver 偏向于设计

Webstrom(重量级) 自带功能比较全面

font标签 :定义字的样式。
属性
face:字体
size:字号大小
color:字的颜色(群里有颜色的文档)
<font face="微软雅黑" size="3" color="red">内容</font>

表单
form:
method:规定发送表单数据的方式。post(隐式的)、get(显式的)
action:必需的 action 属性规定当提交表单时,向何处发送表单数据。
input:
type:指定元素的类型。text(文本框)、password(密码框)、checkbox(复选)、radio(单选)、submit(提交按钮)、reset(重置按钮)、file(文件)、hidden(后续内容)、image(图片按钮) 和 button(普通按钮),默认为 text。
name:        指定表单元素的名称。
value:        元素的初始值。type 为 radio时必须指定一个值

size:          指定表单元素的初始宽度。当 type 为 text 或 password时,表单元素的大小以字符为单位。 对于其他类型,宽度以像素为单位

        checked:type为radio或checkbox时,指定按钮是否是被选中

        textarea:多行文本框。cols:规定文本区域可见列数。rows:规定文本区域可见行数
select:下拉框。一个<select>中至少包含一下<option>。
语法:
<select name="">
<option value=""></option>
</select>


<button></button>标签用<input type="button" />替换
重要事项:如果在 HTML 表单中使用 button 元素,不同的浏览器会提交不同的值。Internet Explorer 将提交 <button> 与 <button/> 之间的文本,而其他浏览器将提交 value 属性的内容。请在 HTML 表单中使用 input 元素来创建按钮。


© &copy;
" &quot;
& &amp;
< &lt;
> &gt;
空格 &nbsp;
推荐网址:http://tool.oschina.net/commons?type=2

猜你喜欢

转载自blog.csdn.net/weixin_42588379/article/details/81066447
今日推荐