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. xmind的第九天笔记

  2. 对于EL表达式和ONGL表达式区别的相关理解

    java程序跑起来之后,会有一个内存空间分配出来,存入用到的值,这个值的周围就是上下文空间,而九大内置对象等,都在这个值的周围放着,像这样: el 就只能获取value stack 周围 的数据,va ...

  3. SEL方法选择器

    在Objective-C中,选择器(selector)有两个意思. 一是指在代码中的方法的名称.二是指在编译是用于替换方法名称的唯一的标识符.编译后的选择器的为SEL类型.所有名称相同的方法拥有同一个 ...

  4. cocoapod的下载安装解释

    本文不提供cocoapod的下载安装的流程,因为那些只要百度一下就有的东西,而是对里面的代码进行解释,希望对iOS小白安装cocoapod有帮助: 一.cocoapod是什么? 开发过程中,我们会用到 ...

  5. JavaScript中的document.cookie的使用

    转:http://blog.csdn.net/liuyong0818/article/details/4807473 我们已经知道,在 document 对象中有一个 cookie 属性.但是 Coo ...

  6. 移动POS机

    1.怎么识别手刷机所属公司是否是二清公司,甚至是多清 去银行,手机银行,网上银行查询该笔款是哪里汇出的,如果是银行或合法支付公司汇出,一般为一清机,如果是个人或无支付牌照的支付公司,一般为二清机: 已 ...

  7. 单例设计模式getInstance()

    对象的实例化方法,也是比较多的,最常用的方法是直接使用new,而这是最普通的,如果要考虑到其它的需要,如单实例模式,层次间调用等等.   直接使用new就不可以实现好的设计好,这时候需要使用间接使用n ...

  8. maxscript, 批量导出物体

    1,将场景中所有选中物体整体导出为一个fbx文件 exportfile filename #noprompt selectedOnly:true using:FBXEXP 2,将场景中所有选中物体各导 ...

  9. mybatis 小于号 转义

    AND lbaq.watch_answer_start_datetime >= #{stm}AND lbaq.watch_answer_end_datetime <= #{etm} 此时报 ...

  10. @Override报错

    仔细看了下项目 , 是因为有人把project的信息传上来了 , 使用编译的JDK变成了1.5(难道是因为他的1.8的版本我没有 ?) , 右键项目, 选property , 把compiler变成1 ...