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. yii去除index.php的入口脚本显示为seo友好的url

    1.去除入口脚本需要在重写url,如果你的webserver软件时Apache的话,必须配置httpd.conf,搜索“LoadModule rewrite_module modules/mod_re ...

  2. phpstorm的快捷键

    F5复制 F6移动 Alt + Delete键安全删除 Shift + F6重命名 按Ctrl + Alt + N内联变量 按Ctrl + Alt + M提取方法(Javascript的唯一) 按Ct ...

  3. 事务的ACID特性

    事务(Transaction)是并发控制的基本单位.    所谓事务,它是一个操作序列,这些操作要么都执行,要么都不执行,它是一个不可分割的工作单位.例如,银行转帐工作:从一个帐号扣款并使另一个帐号增 ...

  4. 理解伪元素 :before和:after

    在CSS中有一特性允许我们添加额外元素而不扰乱文档本身,就是伪元素. 下面举例说明: html: <blockquote>  blockquote只是一个块引用 </blockquo ...

  5. [hdu 3376]Matrix Again

    这题就是真正的费用流了,用 大屁 就算不超时,你也有个 CE :数组 so large 拆点,费用取反,最大费用最大流即可了喵~ 不过似乎这题很不兼容 dijkstra 的样子 就算用 spfa 重赋 ...

  6. Firebug在Firefox DevTools 中复活

    英文:Firefox,编译:开源中国 链接:www.oschina.net/news/80230/firebug-lives-on-in-firefox-devtools 技术最前线转注:2016年1 ...

  7. [MySql] - 开启外部访问

    打开 mysql 的查询窗口(使用root),使用SQL: -- 使用mysql库 use mysql; -- 更新密码 update user set password=PASSWORD('xxxx ...

  8. JSP页面的隐含对象和Servlet程序里的对象之间的关联和区别

    首先,有两个概念: 1.JSP页面的域对象:pageContext,request,session,application对象(四个) void setAttribute(String name,Ob ...

  9. Android无法收到指定广播的问题总结

    首先是应用中不能只有一个广播,必须有一个activity或者service(这种情况比较复杂参考http://www.cnblogs.com/welcoming/p/4120497.html) 简单的 ...

  10. 黄聪：WordPress: 使用 wp_insert_attachment 上传附件

    我们来研究一下如何在主题或者插件的开发中上传附件: 主要参考这个函数:https://codex.wordpress.org/Function_Reference/wp_insert_attachme ...