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. Xcode中使用debug模式和release模式

    在开发过程中,我们经常需要用到NSLog输出一些信息,甚至有的开发过程,必须在控制台查看输出,有经验的程序员通过控制台输出就能知道整个数据交互的一个流程.但是一个发布的程序,里面带有太多的NSLog输 ...

  2. WOJ-1203

    Description 有一组数,很多很多个数,里面有一个数出现了超过一半次,请你把它找出来 Input 先是一个N (N<=1000000),然后接下来一行N个数,请一直处理到EOF. Out ...

  3. 【渗透测试学习平台】 web for pentester -4.XML

    example1: http://192.168.91.139/xml/example1.php?xml=%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%2 ...

  4. mysql添加外键

    语法:alter table 表名 add constraint FK_ID foreign key(你的外键字段名) REFERENCES 外表表名(对应的表的主键字段名); 例: alter ta ...

  5. Servlet基本模式

    一.首先用Myeclipse2015创建一个web项目,然后修改index.jsp. <%@ page language="java" import="java.u ...

  6. 大数据——Hadoop集群坏境CentOS安装

    前言 前面我们主要分析了搭建Hadoop集群所需要准备的内容和一些提前规划好的项,本篇我们主要来分析如何安装CentOS操作系统,以及一些基础的设置,闲言少叙,我们进入本篇的正题. 技术准备 VMwa ...

  7. Linux(Debian)+Apache+Django 配置

    配置Apache和Django连接的过程可谓是一波三折,在此记录.   零.基本的安装 软件环境 l  Linux-3.2.0-4-amd64-x86_64-with-debian-7.7 l  py ...

  8. java 里面的string 和byte[] 怎么互转

    public class TestBytes { private static String FORMAT = "UTF-8"; public static void main(S ...

  9. knockout 第一个实例visible

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  10. 从jsTree演示代码中提取的在线文件查看

    从jsTree演示代码中提取的在线文件查看 jsTree 请参考:https://www.jstree.com/ 效果如下: 代码下载:http://files.cnblogs.com/files/z ...