Web前端基础day1之html

1、html结构

    <!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标签关系分类

嵌套标签(父子关系)

<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、图片标签

<img src="" 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‘     在新窗口中打开页面

优化写法:

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

8、特殊符号

大于号 >     &gt;

小于号 <     &lt;

空格         &nbsp;

9、列表

a.无序列表

<ul>    <li></li>   列表项</ul>

例如:type默认为实心圆

<ul>    <li>shaw</li>    <li>sam</li>    <li>stiven</li></ul>

Type属性:circle    空心圆

Type属性:square    实心正方形

b.有序列表

<ol>    <li></li>   列表项</ol>

例如:type默认为数字

把大象放冰箱,需要几步<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>    <dt></dt>   标题    <dd></dd>   用法和li一样</dl>
时间: 2024-10-27 21:12:07

Web前端基础day1之html的相关文章

《web 前端基础到实战系列课程》

<web 前端基础到实战系列课程> 摘要: mod_expires&mod_headers可以减少10%左右的重复请求,让重复的用户对指定的页面请求结果都CACHE在本地,根本不向服务器发出请求. 在使用之前,首先要确认一下"mod_expires"模组是否有启用.如果是自己安装Apache来架设网页主机的话,这里我们可以透过编辑Apache的"httpd.conf"设定档来处理 一.浏览器缓存原理 将该行前面的"#"字号删除

进击的Python【第十三章】:Web前端基础之HTML与CSS样式

进击的Python[第十四章]:Web前端基础之HTML与CSS样式 一.web框架的本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. #!/usr/bin/env python #coding:utf-8 import socket def handle_request(client): buf = client.recv(1024) client.send("HTTP/1.1 200 OK\r\n\r\n")

web前端基础知识总结

上个寒假总结的web前端的一些知识点给大家分享一下 1.<html>和</html> 标签限定了文档的开始和结束点. 属性: (1)  dir: 文本的显示方向,默认是从左向右 (2) lang: 表示整个文档中所使用的语言,en--英文,zh--中文 (3) version:定义创作文档的HTML的标准版本 2.<head></head>用于封装位于文档头部的其他标签 属性: (1) dir:文本的显示方向 (2)  Lang:语言信息 (3)  Prof

web前端基础知识学习网站推介

内容:一.基础知识及学习资料1. HTML入门学习:http://www.w3school.com.cn/html/index.aspHTML5 入门学习:http://www.w3school.com.cn/html5/index.asp 2. CSS入门学习:http://www.w3school.com.cn/css/index.aspCSS3入门学习:http://www.w3schools.com/css3/default.asphttp://css3-tutorial.com/ 3.

Web前端基础(CSS position的正确用法)

position属性的relative以及absolute的区别是什么? 任何元素的默认position的属性值都为static(静态),但我们在布局的时候也会经常用到relative(相对)以及absolute(绝对)这两种属性. 再分别介绍两种属性之前,我们一定要记住一个重要结论:如果用position来进行布局,父级元素的position属性必须为relative,而定位于父级内部某个位置的元素,最好用absolute,因为它不受父级元素padding的属性影响,当然也可以用relativ

web前端基础知识整理

1.we标准的理解 (1)Web标准规范要求,书写标签必须闭合.标签小写.不乱嵌套(可提高搜索引擎搜索效率,SEO优化). (2)使用外链css和js脚本,从而达到结构与行为.结构与表现的分离,提高页面的渲染速度,能更快地显示页面的内容. (3)样式与标签的分离,使结构与表现分离,更少的代码和组件, 从而降低维护成本.改版更方便 . (4)不需要变动页面内容,便可提供打印版本而不需要复制内容,提高网站易用性 . 2.前端页面的三层结构及其作用 结构层(structural layer)由 HTM

Web前端基础应用

1.HTML基础 在网络如此发达的今天,大家的生活.学习和工作基本上都离不开网络.大家经常浏览的新闻页面.微博和微信等各种从网上获得信息的途径,不论是PC终端,还是移动客户端,基本上都是以Web为基础来呈现的,因此Web页面呈现信息已成为各种信息共享和发布的主要形式.而HTML(Hyper Text Markup Language,超文本标记语言,在有些书籍中也翻译为超文本标签语言)则是创建Web页面的基础.本书将从HTML文件的基本结构是什么,到使用HTML标签制作简单的网页,一直到最后使用D

web前端基础知识

#HTML 什么是HTML,和他ML... 网页可以比作一个装修好了的,可以娶媳妇的房子. 房子分为:毛坯房,精装修 毛坯房的修建: 砖,瓦,水泥,石头,石子.... 精装修的房子:在毛坯房的基础上进行粉刷,覆盖,雕琢,修饰等操作.... HTML标签 相当于盖毛坯房用的石子,砖瓦....:房子成功,但是不会很好看. CSS属性  相当于装修时候使用的刷子,涂料,扣板...: 可以让毛坯房变得更加美观 HTML 超文本标记语言. HyperText Markup Language HTML标签的

web前端基础知识-(八)Ajax

Ajax即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术,AJAX = 异步 JavaScript和XML(标准通用标记语言的子集),AJAX 是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新. 这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. -----传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页