1.HTML的相关概念

网站建设流程

网页组成

   网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)。    

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

  

HTML与XHTML的最大的不同是:

  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. MyBatis 示例-类型处理器

    MyBatis 提供了很多默认类型处理器,参考官网地址:链接,除了官网提供的类型处理器,我们也可以自定义类型处理器. 具体做法为:实现 org.apache.ibatis.type.TypeHandl ...

  2. Leetcode(3)无重复字符的最长子串

    Leetcode(3)无重复字符的最长子串 [题目表述]: 给定一个字符串,请你找出其中不含有重复字符的 最长子串 的长度. 第一种方法:暴力 执行用时:996 ms: 内存消耗:12.9MB 效果: ...

  3. C# 8.0 的默认接口方法

    例子 直接看例子 有这样一个接口: 然后有三个它的实现类: 然后在main方法里面调用: 截至目前,程序都可以成功的编译和运行. IPerson接口变更 突然,我想对所有的人类添加一个新的特性,例如, ...

  4. Newtonsoft—Json.NET常用方法简述

    Json.NET常用方法汇总(可解决日常百分之90的需求) 0.Json.NET基础用法 首先去官网下载最新的Newtonsoft.Json.dll(也可以使用VS自带的NuGet搜索Json.NET ...

  5. Kafka常用操作备忘

    启动nohup ./bin/zookeeper-server-start.sh config/zookeeper.properties &nohup ./bin/kafka-server-st ...

  6. zepto源码分析·core模块

    准备说明 该模块定义了库的原型链结构,生成了Zepto变量,并将其以'Zepto'和'$'的名字注册到了window,然后开始了其它模块的拓展实现. 模块内部除了对选择器和zepto对象的实现,就是一 ...

  7. SteamVR Plugin

    使用HTC vive基于unity做虚拟现实,需要用到steamVR插件,最近查找了很多资料,稍微做一下总结. 做虚拟现实无非是头显在场景中的camera功能以及手柄的操作功能. (一)camera以 ...

  8. Docker在Linux上 基本使用

    简介 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux机器上,也可以实现虚拟化,容器是完全使用沙箱机制,相互之间不会有任 ...

  9. Java 用单向循环链表实现 约瑟夫问题

    public class lianbiao2 { class Node{ Node next; int number; public Node getNext() { return next; } p ...

  10. commix工具配合命令注入

    commix简介 commix是一款由python编写,开源自动化检测系统命令注入工具  https://github.com/commixproject/commix commix 参数 选项: - ...