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. Python 基礎 - pyc 是什麼

    Python2.7 版中,只要執行 .py 的檔案後,即會馬上產生一個 .pyc 的檔案,而在 Python3 版中,執行 .py 的檔案後,即會產生一個叫 __pycache__ 的目錄,裡面也會有 ...

  2. Neo4j Index Notes

    Motivation GraphDatabasesBook: Robinson I., Webber J., Eifrem E. Graph Databases. 2013. 这本该是入门概念性质的书 ...

  3. xmind的第八天笔记

  4. php部分---一个分页类、用法

    1.分页类 <?php /** file: page.class.php 完美分页类 Page */ class Page { private $total; //数据表中总记录数 privat ...

  5. LeetCode() Ugly Number II 背下来！

    一个别人,非常牛逼的思路,膜拜了!orz!!!! vector <int> results (1,1); int i = 0, j = 0, k = 0; while (results.s ...

  6. java Scanner

    public static void main(String[] args) throws IOException { System.out.print("Enter a number:&q ...

  7. SQL server数据缓存依赖

    SQL server数据缓存依赖有两种实现模式,轮询模式,通知模式. 1  轮询模式实现步骤 此模式需要SQL SERVER 7.0/2000/2005版本以上版本都支持        主要包含以下几 ...

  8. b/s开发者的困境

    作为一个由内而外都贴着web开发者标签的开发人员,注定会被大多数c/s开发者和通讯接口开发者所鄙视. 在他们看来,从事web开发,肯定很少用到算法,设计模式,多线程等等.我只能说,就我个人的经历来说, ...

  9. Celery 和 Redis 入门

    Celery 是一个广泛应用于网络应用程序的任务处理系统. 它可以在以下情况下使用: 在请求响应周期中做网络调用.服务器应当立即响应任何网络请求.如果在请求响应周期内需要进行网络调用,则应在周期外完成 ...

  10. string.Format之你不知道的事

    1.格式化货币(跟系统的环境有关,中文系统默认格式化人民币,英文系统格式化美元) string.Format("{0:C}",0.2) 结果为:￥0.20 (英文操作系统结果:$0 ...