1、html结构

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>  
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html结构</title>
</head>
<body>
    “主体结构”
</body>
</html>

<!DOCTYPE html>     告诉浏览器当前文档类型（html）

<html></html>      根标签

<head></head>        定义了头部

<title></title>        网页的名称（标题）

<body></body>     网页主体（网页中看到的所有信息都放在body标签中）

2、html标签关系分类

HTML标签是分等级的，HTML将所有的标签分为两种：容器级、文本级.

容器级的标签:里面可以放置任何东西。

文本级的标签里面:只能放置文字、图片、表单元素。

文本级标签：p、a

容器级标签:h

嵌套标签（父子关系）

1
2
3
<head>
      <title></title>
</head>

并列关系

<head></head>,<body></body>

3、html标签分类

双标签（有开始，有结束）

<head></head>

单标签:只有开始标签，没有结束标签

4、单标签

a．文本注释标签：

<!--- 文本注释内容 --->(快捷键: Ctrl+/)

b．横线标签

<hr />

c．换行标签

<br />

5、双标签

a．标题标签

<hn></hn>n:1-6

取值越大，字体越小。切记：没有h7以后的标签

b．段落标签

<p></p>

c．字体标签

<font color="red" size="30px"></font>

d．文字加粗

<strong></strong>,<b></b>

e．文字斜体显示

<em></em>,<i></i>

f．下划线

<ins>下划线</ins>,<u></u>

g．删除线

<del>原价880</del>,<s></s>

6、图片标签

<imgsrc="" alt="" title="" width="" height="">

src     图片的名称/图片的路径

alt     图片无法正常加载的时候，对图片的说明

title   当鼠标放到图片上显示的文字

width   设置宽度

height  设置高度

7、超链接

<a href="http://www.baidu.com">百度</a> 实现网页之间的跳转

鼠标放到超链接上显示的文字：

<a href="http://www.baidu.com" title="这是百度">百度</a>

锚链接：

a．在页面中写一个超链接

<a href="#shaw">找百度去</a>

b．给任何一个标签id取值和a标签中的 href取值一样

<p id="shaw">我是百度</p>

总结：实现在本页面中跳转

target='_blank'     在新窗口中打开页面

优化写法：

1
2
3
4
5
6
<base target="_blank">  #这么写
</head>
<body>
    <a href="http://www.baidu.com">百度</a>
</body>
</html>

8、特殊符号

大于号 >     &gt;

小于号 <     &lt;

空格         &nbsp;

9、列表

a．无序列表

1
2
3
<ul>
    <li></li>   列表项
</ul>

例如：type默认为实心圆

1
2
3
4
5
<ul>
    <li>shaw</li>
    <li>sam</li>
    <li>stiven</li>
</ul>

Type属性：circle    空心圆

Type属性：square    实心正方形

b．有序列表

1
2
3
<ol>
    <li></li>  列表项
</ol>

例如：type默认为数字

把大象放冰箱，需要几步

1
2
3
4
5
<ol>
    <li>打开冰箱门</li>
    <li>把大象放进去</li>
    <li>关上冰箱门</li>
</ol>

Type属性：type="I"  条状I II III

Type属性：type="1 | A | a | I"等

Type属性：type="a" start="2" 表示序列类型为小写字母，排序从第二个开始

c．自定义列表

dl表示definition list 定义列表

dt表示definition title  定义标题

dd表示definition description 定义表述词儿

1
2
3
4
<dl>
    <dt></dt>  标题
    <dd></dd>  用法和li一样
</dl>

Web前端之html_day1的更多相关文章

  1. Web前端需要熟悉大学里【高大上】的计算机专业课吗？

    作为一名刚刚大学毕业,进入新的学习阶段的研究生,我必须说大学的专业课非常重要!不管你信不信,事实就是如此! 一.大学学习的专业课非常重要,它决定了我们能走到什么高度 前端的发展非常快,我常常觉得刚刚关 ...

  2. web前端开发分享-目录

    1. web前端开发分享-css,js入门篇 2. web前端开发分享-css,js进阶篇 3. web前端开发分享-css,js提高篇 4. web前端开发分享-css,js工具篇 5. web前端 ...

  3. Web前端温故知新-CSS基础

    一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体. ...

  4. web前端的春天 or 噩梦

    「 微信应用号可以做什么」 简单说,微信"小程序"可以为开发者提供基于微信的表单.导航.地图.媒体和位置等开发组件,让他们在微信的网页里构建一个 HTML 5 应用.同时微信还开放 ...

  5. Web 前端开发精华文章推荐（jQuery、HTML5、CSS3）【系列十二】

    2012年12月12日,[<Web 前端开发人员和设计师必读文章>系列十二]和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HT ...

  6. 也许你需要点实用的-Web前端笔试题

    之前发的一篇博客里没有附上答案,现在有空整理了下发出来,希望能帮助到正在找工作的你,还是那句话:技术只有自己真正理解了才是自己的东西,共勉. Web前端笔试题 Html+css 1.对WEB标准以及w ...

  7. 用grunt搭建web前端开发环境

    1.前言 本文章旨在讲解grunt入门,以及讲解grunt最常用的几个插件的使用. 2.安装node.js Grunt和所有grunt插件都是基于nodejs来运行的,如果你的电脑上没有nodejs, ...

  8. 每天成长一点---WEB前端学习入门笔记

    WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...

  9. [转载]Web前端开发工程师编程能力飞升之路

    [背景] 如果你是刚进入web前端研发领域,想试试这潭水有多深,看这篇文章吧:如果你是做了两三年web产品前端研发,迷茫找不着提高之路,看这篇文章吧:如果你是四五年的前端开发高手,没有难题能难得住你的 ...

随机推荐

  1. SVN提交碰到的问题奇怪的问题

    svn提交遇到恶心的问题,可能是因为上次cleanup中断后,进入死循环了. 错误如下: 解决方法:清空svn的队列 1.下载sqlite3.exe 2.找到你项目的.svn文件,查看是否存在wc.d ...

  2. Sublime Text 快捷键及插件安装

    Sublime Text是一款跨平台的编辑器,它小巧绿色且速度非常快,支持各种流行编程语言的语法高亮.代码补全等,插件非常丰富!editplus.notepad++也都是不错的工具,体积轻巧,启动迅速 ...

  3. Java多线程之ConcurrentSkipListMap深入分析(转)

    Java多线程之ConcurrentSkipListMap深入分析   一.前言 concurrentHashMap与ConcurrentSkipListMap性能测试 在4线程1.6万数据的条件下, ...

  4. C#利用SMTP服务器发送邮件

    使用.net(C#)发送邮件学习手册(带成功案例) 1.了解发送邮件的三种方式 2.实例介绍使用client.DeliveryMethod = System.Net.Mail.SmtpDelivery ...

  5. CF 628A --- Tennis Tournament --- 水题

    CF 628A 题目大意:给定n,b,p,其中n为进行比赛的人数,b为每场进行比赛的每一位运动员需要的水的数量, p为整个赛程提供给每位运动员的毛巾数量, 每次在剩余的n人数中,挑选2^k=m(m & ...

  6. CDH版本升级

    近期项目中需要用oozie workflow调度hivesql,发现无法执行查询语句,见:https://community.cloudera.com/t5/Batch-Processing-and- ...

  7. Qt 自定义 滚动条 样式

    今天是时候把软件中的进度条给美化美化了,最初的想法就是仿照QQ. 先前的进度条是这样,默认的总是很难受欢迎的:美化之后的是这样,怎么样?稍微好看一点点了吧,最后告诉你实现这个简单的效果在Qt只需要加几 ...

  8. 国外程序员整理的 C++ 资源大全(转)

    原文:http://www.csdn.net/article/2014-10-24/2822269-c 关于 C++ 框架.库和资源的一些汇总列表,由 fffaraz发起和维护. 内容包括:标准库.W ...

  9. MongoDB学习笔记一：入门

    文档:多个键及其关联的值『有序』地放置在一起. {"greeting" : "Hello, world!", "foo" : 3}集合:一组 ...

  10. python 字典操作

    字典的常用操作: clear 功能:清空字典 dict_li = {'users':'swht','age':'18',} dict_li.clear() 返回结果:dict_li {} copy 功 ...