html+css语法学习

1.Html语法
1.什么是html语言
超文本标记语言,标准通用标记语言下的一个应用。是 网页制作必备的编程语言。超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。
超文本标记语言的结构包括“头”部分(英语:Head)、和“主体”部分(英语:Body),其中头”部提供关于网页的信息,“主体”部分提供网页的具体内容。
2.Html的标记和属性
HTML保存格式

  1. .html
  2. .htm
  3. .xhtml
    标记和被标记的内容构建出HTML文档
  4. <标记> 内容 </标记>
    标记属性
  5. 就是用来控制我们的内容如何显示
  6. 格式:<标记 属性1=属性值 属性2=属性值……….>内容</标记>
  7. 语法不区分大小写
    a. <HTML>,<Html>,<html>都是一样的意义,但是尽量使用小写
  8. 文档注释
    a.<!—注释内容-->
  9. 代码格式
    a.空格键和回车键在网页中都不起作用
    b.使用Tab键进行缩进!
  10. 字符实体
    a.什么是字符实体?
    字符实体通俗讲就是网页文件中复杂的符号代码和一些标点的代码。例如小于号 < 大于号 > 双引号 "这些符号要在浏览器中显示,在HTML文档中都必需被转化成字符实体。字符实体有三部分:一个和号 (&),一个实体名称及一个分号(;),或者 # 和一个实体编号,以及一个分号 (;)。
    b.常见字符实体
    空格  &nbsp;  &#160;
<   小于号 &lt;    &#60;
>   大于号 &gt;    &#62;
&   和号  &amp;   &#38;
"   引号  &quot;  &#34;
'   撇号  &apos; (IE不支持)  &#39;
¢   分(cent) &cent;  &#162;
£   镑(pound)    &pound; &#163;
¥   元(yen)  &yen;   &#165;
€   欧元(euro)    &euro;  &#8364;
§   小节  &sect;  &#167;
©   版权(copyright)   &copy;  &#169;
®   注册商标    &reg;   &#174;
™   商标  &trade; &#8482;
×   乘号  &times; &#215;
÷   除号  &divide;    &#247; 

2.html的基本结构
1.<html>内容</html>
Html文档的文档标记,也称为html的开始标记。分别位于网页最前端和最后段,<html>表示网页开始,</html>表示网页的结束。
2.<head>内容</head>
Html文件头标记,也称为html头信息开始标记。用来包含文件的基本信息,比如网页的标题、关键字。在其中可以放入<title>……</title>、<meta>、<style>……</style>等标记。
3.<title>内容</title>
Html文件标题标记,网页的“主题”,显示在浏览器的窗口的左上角,应当注意网页的标题不能太长,像百度这种短小精悍。
4.<body>内容</body>
HTML文档的主体标记,可以包含多个标记。例如:<p></p>、<h1></h1>、
</br>等标记来组成我们看见的网页。Body标记常见属性:
bgcolor-----------------设置背景颜色---------<body bgcolor=”blue”></body>
text--------------------设置文本颜色----------<body text=”red”></body>
link---------------------设置连接颜色---------<body link=”red”></body>
vlink--------------------已经访问了的链接颜色--<body vlink=”yellow”></body>
alink--------------------正在被点击的链接颜色--<body alink=”red”></body>
5.<meta>
页面的元信息,提供有关页面的元信息,比如针对搜索引擎和更新频度的描述和关键词
<meta name=”keyworlds” content=”内容”>,其中常用的name属性有author、keyworlds、description、others。<meta>必须放在head元素里面。<meta charset=”utf-8”>来设置编码格式。
3.文档设置标记
1.格式标记

强制换行标记
<p>换段落标记
<center>居中对齐标记
<pre>预格式化标记
<li>列表项目标记
<ul>无序列表标记
<ol>有序列表标记---{ <ol type=”符号类型”>
<li type=”符号类型“></li>
<li type=”符号类型”></li>
…………………………………
………………………………
</ol>
}
Type属性值:1、A、a、I、i
Value定义一个新的序列数字起始值,列表可以嵌套。
<dl><dt><dd>对列表条目进行简短的说明,格式:
<dl>
<dt>软件说明:</dt>
<dd>简单介绍软件的功能及基本应用</dd>
<dt>软件界面</dt>
<dd>用于选择软件的外观</dd>
</dl>


分割线————————————————————————————
<div>分区显示标记,也称之为层标记,常用来编排一大段的html段落,也可以用于格式化表,和<p>很相似,可以多层嵌套使用。
2.文本标记
<hn></hn>,标题标记,n为1到6个级别,h1最大,h6最小;
<font></font>,字体设置标记,有size(字体大小)、color(颜色)、face(字体)。例如:<font size=”3” color=”red” face=”宋体”></font>。Size从1到7;
<b></b>粗体标记;
<i></i>斜体标记;
<cite></cite>引用方式的字体,斜体;
<em></em>表示强调,斜体;
文字下标字体标记;
文字上标字体标记;
<strong></strong>表示强调,粗体;
<small></small>小型字体标记;
<big></big>大型字体标记;
<u></u>下划线字体标记;
4.图形标记
<img>图像标记

  1. 使用方法
    <img src=”路径/文件名.图片格式或者图片网址” width=”属性值” height=”属性值” border=”属性值” alt=”属性值”>
    2.注意
    <img>为单标记;
    3.<img>标记属性
    1.src属性:指定我们要加载的图片的路径和图片名称和格式
    2.width属性:指定图片的宽度,单位为px、em、cm、mm。
    3.height属性:指定图片高度,单位为px、em、cm、mm。
    4.border属性:指定图片的边框宽度,单位为px、em、cm、mm。
    5.alt属性:当网页上的图片被加载完成后,鼠标移动到上面去,会显示这个图片指定的属性文字。如果图像没有下载或者加载失败,会用文字来代替图像显示。搜索引擎可以通个这个属性的文字来抓取图片。
    5.超链接的使用
    1.基本语法
    <a href=” ” target=”打开方式” name=“页面锚点名称” >链接文字或者图片</a>
    2.属性
    1.href属性:链接的的地址,链接的地址可以是一个网页,也可以是一个视频、图片、音乐等等。
    2.target属性:
    定义超链接的打开方式
    _blank 在一个新的窗口中打开链接;
    _seif(默认值)在当前页面打开;
    _parent 在父窗口中打开页面
    _top 在顶层窗口中打开文件
    3.name属性:
    指定页面的的锚点名称;
    6.表格
    1.<table>…</table>标记
    1.基本格式:
    <table width="960" …… height="300"(属性=”属性值”) >
    <caption>表格标题</caption>
    <tr>
    <th>班级</th>
    <th>姓名</th>
    <th>年龄</th>
    <th>成绩</th>
    </tr>
    <tr>
    <td>四年级一班</td>
    <td>张三</td>
    <td>16</td>
    <td>80</td>
    </tr>
    </table>
    2.table标记的属性:
    1.width表示表格宽度,单位px、%。
    2.height 表示表格的高度,单位px、%。
    3.border 表示表格外边框的宽度,单位
    4.align属性 表格显示的位置。如:align=“left”,其中left可以为center、right,默认是left。
    5.cellspacing 单元格之间的间距,默认值是2px,单位为px像素。
    6.cellpadding 单元格内容与单元格边框的显示距离,单位像素。
    7.frame 控制表格边框最外层的四条线框:
    1.void:默认值,表示无边框
    2.above:表示仅有顶部边框
    3.below:表示仅有底部边框
    4.hsides:表示仅有顶部和底部边框
    5.lhs:表示仅有左侧边框
    6.rhs:表示仅有右侧边框
    7.vsides:表示仅有左右侧边框
    8.box:表示包含全部4个边框
    9.border:表示包含全部4个边框
    8.rules 控制单元是否显示以及如何显示单元格之间的分割线:
    1.none 表示无分割线
    2.all 表示包括所有分割线
    3.rows 表示仅有行分割线
    4.clos 表示仅有列分割线
    5.groups 表示仅在行组和列祖之间有分割线
    2.<caption>…</caption>标记
    即表格标题标记,位于<table>之后,<tr>之前。有align属性,使用格式为<caption align=”top”>。top可以为bottom(表格的下部)、left(表格的左部)、right(表格的右部)。
    3.<tr>…</tr>表记
    定义表格的一行,对于每一个表格行,都是由一对<tr>…</tr>标记表示,每一行<tr>标记内可以嵌套多个<td>或者<th>标记。
    1.bgcolor 设置背景颜色,bgcolor=”颜色值”
    2.align 设置垂直方向对齐方式,align=“值”,值为top(靠底部对齐)、bottom(靠顶端对齐)、middle(居中对齐)。
    3.valign 设置水平方向对齐方式,valign=”值”,值为left(靠左对齐)、right(靠右对齐)、center(居中对齐)。
    4.<td>和<th>标记
    <td>和<th>都是单元格的标记,其必须嵌套在<tr>标签内,是成对出现的,<th>是表头标记,通常位于首行或者首列,<th>中的文字默认会被加粗,而<td>不会,<td>是数据标记,表示该单元格的具体数据。属性有bgcolor、align、valign、width、height、rowspan(单元格所占行数)、colspan(单元格所占列数)。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,546评论 6 507
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,224评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,911评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,737评论 1 294
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,753评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,598评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,338评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,249评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,696评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,888评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,013评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,731评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,348评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,929评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,048评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,203评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,960评论 2 355

推荐阅读更多精彩内容

  • 一,HTML语言的一般语法: 1,围堵标记:<>… 1)带属性的标记: … 2)无属性的标记:加粗 居中 标题 2...
    清水易蓝阅读 1,266评论 0 2
  • 浏览器与服务器的基本概念 浏览器(安装在电脑里面的一个软件) 作用: ①将网页内容渲染呈现给用户查看。 ②让用户通...
    云还灬阅读 1,122评论 0 0
  • HTML标记语言 一、HTML的语法二、html的基本结构三、文档设置标记四、图像标记五、超链接的使用六、表格七、...
    子午禾苇阅读 4,775评论 0 3
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 3,898评论 0 0
  • 概述 在网易云课堂学习李南江老师的《从零玩转HTML5前端+跨平台开发》时,所整理的笔记。笔记内容为根据个人需求所...
    墨荀阅读 2,339评论 0 7