1.HTML的相关概念

网站建设流程

网页组成

　　 网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。　　　　

  1. html（Hypertext Markup Language）—— 结构超文本标记语言
  2. css（Cascading Style Sheets）—— 样式层叠样式表
  3. js（javascript）—— 行为

　　

HTML与ＸＨＴＭＬ的最大的不同是：

  1. XHTML 元素必须被正确地嵌套。
  2. XHTML 元素必须被关闭。
  3. 标签名必须用小写字母。
  4. XHTML 文档必须拥有根元素。

第一个页面　

创建站点

站点的作用

  1. 用来归纳一个网站上所有的网页、素材以及他们之间的联系
  2. 创建站点的步骤
  3. 文件的命名规则

　　　　文件命名规则：用英文，不用中文

　　　　名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；必须以英文字母开头。

　　　　首页必须命名为index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Hello Word</title>
</head>

<body>
   这是我的的第一节课
</body>
</html>

HTML基本语法

　　常规标签:

　　　　<标签 属性="属性值" 属性="属性值"></标签>

　　单标签：

　　　　<标签 属性=“属性值” />

常用标签

1)文本标题
<h1>一级标题</h1>
<h2>二级标题</h2>
……
<h6>六级标题</h6>
2)段落标记
<p>段落文本内容</p>
3）空格
&nbsp;（所占位置没有一个确定的值,
这与当前字体字号都有关系。
4） <br />强制换行

5）加粗
<b>加粗内容</b>
<strong>加粗内容</strong>
6）倾斜
<em></em>
<i></i>
7）水平线/删除线/下划线
<hr /> / <del></del>/<u></u>
8）上标／下标
<sup>上标</sup>
<sub>下标</sub>

列表标签

有序列表

<ol>(ordered list)
<li></li>
<li></li>
．．．．．．
</ol>

无序列表

<ul>
<li></li>
<li></li>
．．．．．．
</ul>

自定义列表

dl>
<dt>名词</dt>
<dd>解释</dd> (定义描述)
．．．．．．
</dl>

img标签/超链接标签

<img src="图片路径"  alt="图片名" title="图片标题"/>

alt属性 是图片名字，是给百度搜索引擎抓取使用

相对路径：../返回上一级    ./下一级

绝对路径：图片的绝对所在位置（一般不使用）

a标签： 超链接/下载/锚点
语法：
<a href="连接地址">链接文本/图片</a>
 属性： target 链接打开方式
 _blank  新窗口
 _self     当前窗口

表格table

<table>

<tr>

<td></td>

</tr>

</table>

table:表格标签      tr：行标签     td：单元格标签

width="表格的宽度"
height="表格的高度"
border="表格的边框"
bgcolor="表格的背景色"
cellspacing="单元格与单元格之间的间距"
cellpadding="单元格与内容之间的空隙"
水平对齐方式：align="left/center/right";

colspan=“所要合并的单元格的列数"合并列;

rowspan=“所要合并的单元格的行数” 合并行;

 

HTML学习 day02的更多相关文章

  1. python开发学习-day02(元组、字符串、列表、字典深入)

    s12-20160109-day02 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: ...

  2. Java学习day02

    day02-课堂笔记 1.打开DOS命令窗口,执行java HelloWorld,执行原理? * java.exe命令会启动JVM * JVM启动之后会启动类加载器ClassLoader * Clas ...

  3. Django学习day02随堂笔记

    每日测验 """ 今日考题 1.谈谈你对web框架的认识,简述web框架请求流程 2.python三大主流web框架的区别 3.安装django需要注意的事项有哪些(最少 ...

  4. 学习day02

    day021.结构标记 ***** 做布局 1.<header>元素 <header></header> ==> <div id="heade ...

  5. python学习 day02打卡

    今天主要学习的内容: 1.while 循环 :  语法: while 条件 : 循环体 #判断条件是否成立.如果成立执行循环体.然后再次判断条件...直到条件不成立石跳出循环 else : 当条件不成 ...

  6. vue学习-day02（自定义指令，生命周期）

    目录: 1.案例:品牌管理    2.Vue-devtools的两种安装方式    3.过滤器,自定义全局或私有过滤器    4.鼠标按键事件的修饰符    5.自定义全局指令:让文本框获取焦点   ...

  7. MVC学习Day02之校验

    MVC校验有两种方法: 方法一:自己动手写js---------略 方法二: l在View的页面中,首先指定页面强类型@model 类型 l使用Html.***For(model=>model. ...

  8. MVC学习Day02

    MVC中的异步请求: 方法一:使用jQuery封装的函数(例子中用的是post请求,$("#form1").serialize()讲表单中的数据序列化提交给服务端)---返回的是纯 ...

  9. python学习-day02

    ---恢复内容开始--- 一.pycharm安装 1.1破解方式http://www.cnblogs.com/evlon/p/4934705.html 1.2.头部配置: 二.运算符 2.1.比较运算 ...

  10. Mybatis学习 day02

    第十六章回顾SQL99中的连接查询 1)内连接 2)外连接 3)自连接 第十七章回顾hibernate多表开发 1)一对一 2)一对多 3)多对多 第十八章 mybatis一对一映射[学生与身份证] ...

随机推荐

  1. kali更新源地址更改

    问题: Hit:1 http://mirrors.ustc.edu.cn/kali kali-rolling InReleaseIgn:2 http://mirrors.ustc.edu.cn/kal ...

  2. AS报错：lambda expressions are not supported at this language level

    AS报错:lambda expressions are not supported at this language level 解决方法 打开打开 File --> Project Stuct ...

  3. SpringBoot接管SpringMvc

    SpringBoot接管SpringMvc Spring Web MVC framework(通常简称为“Spring MVC”)是一个丰富的“model 视图控制器”web framework. S ...

  4. 20190730_图像混合_opencv_python

    今天学习了 图像的混合 教程上的代码很简单,但是绝对运行不出来 教程名称:OpenCV-Python 中文教程 #图像融合 import cv2 import numpy as np import m ...

  5. MySQL查询-分组取组中某字段最大（小）值所有记录

    最近做东西的时候,用到一个数据库的查询.将记录按某个字段分组,取每个分组中某个字段的最大值的所有记录.举栗子来说. 已知分数表“score”,包含字段“id", "name&quo ...

  6. Web for pentester_writeup之Directory traversal篇

    Web for pentester_writeup之Directory traversal篇 Directory traversal(目录遍历) 目录遍历漏洞,这部分有三个例子,直接查看源代码 Exa ...

  7. CAT客户端如何从Apollo中读取配置？

    运行环境 以下就是这个示例的运行环境,如果版本号不一样,区别也应该不会很大,可以根据实际情况做相应调整. JDK 8 spring boot 2.0.7.RELEASE cat-client 3.0. ...

  8. Redis持久化--Redis宕机或者出现意外删库导致数据丢失--解决方案

    echo编辑整理,欢迎转载,转载请声明文章来源.欢迎添加echo微信(微信号:t2421499075)交流学习. 百战不败,依不自称常胜,百败不颓,依能奋力前行.--这才是真正的堪称强大!!! Red ...

  9. 我是个sb

  10. it公司比较

    1:本人西电通院2013届毕业硕士,根据今年找工作的情况以及身边同学的汇总,总结各大公司的待遇如下,吐血奉献给各位学弟学妹,公司比较全,你想去的公司不在这里面,基本上是无名小公司了:但无名小公司有时也 ...