day21-HTML简介

今天开始python学习的第二阶段,进入web前端的学习;

一、web前端简介

1、web标准
web前端的内容:HTML、CSS、JS(JavaScript);

web标准(万维网-W3C指定的)中规定HTML是结构标准,CSS是表现标准,JS是行为标准;

HTML结构标准中规定了网页上能够显示的内容,比如文字、图片、音频、视频、Flash、按钮、输入框等
CSS表现标准规定网页的内容的布局和样式,比如内容该显示在什么位置,内容是什么颜色、多大、多宽等
JS行为标准规定网页的内容在某种情况下发生什么样的改变(动态改变)。

2、HTML
什么是HTML?
HTML又叫超文本标记语言(是标记语言,不是编程语言)
HTML版本
狭义的h5:指HTML第5个大版本
广义的h5:指的是HTML5+CSS3+javascript
HTML文件结构(由不同的标签组成)

3、HTML中的标签
网页中的内容就是通过HTML中的不同的标签(标记)来确定的

标签语法:

常规标签(双标签):<标签名 属性名1=属性值1 属性名2=属性值2 ...>标签内容
单标签:<标签名 属性名1=属性值1 属性名2=属性值2...> 或者 <标签名 属性名1=属性值1 属性名2=属性值2.../>
说明:
<>,<"/">:固定写法,HTML中所有的标签都是写在<>中的
标签名:不是随意命名的,而是一些固定的值;例如:p标签、a标签、b标签、h1标签、input标签、img标签等;
标签名前不能有空隙
属性:属性放在开始标签中,属性名和值之间用=连接,多个属性之间用空格隔开。属性可以是自定义的属性也可以是标签自带的属性。
标签内容:双标签才存在标签内容,标签内容可以是任何东西(可以是文字,也可以是其他的标签)

4、基本语法
HTML中大小写不敏感:HTML和html,Html是一样的。
文件名命名要求:是由字母和数字组成,但是数字不开头,一般都是小写的。网站首页的HTML文件命名为index。

二、文本标签

1、标题标签:h1~h6
2、段落标签:p标签
3、文字效果:
加粗:b 标签,strong 标签 b标签:单纯的在样式上进行加粗 strong标签:除了将文字加粗显示外,还有强调的意义。
倾斜标签:i 标签;em 标签具有强调作用。
4、水平线:hr标签
5、列表标签(ul,ol,dl)
html中有三种列表,分别是:无序列表,有序列表,自定义列表;其中都要包含li标签

三、图片和超链接

1、图片标签:img标签
它是单标签
src属性:图片地址(可以是本地地址,可以是远程图片地址)
title属性:设置图片的标题(这个标题是鼠标停留在图片上显示的文字)
alt属性:用来设置图片加载失败的时候出现的提示信息。

2、超链接标签:a 标签
想要点击跳转的地址

1)、href属性:跳转目标对应的地址

其他的网页地址
写本地的一个HTML路径
空----刷新当前网页
选择器----让网页跳转到指定的位置
2)、target属性:设置跳转方式

_self(默认值):在当前页面中刷新出新的内容。
_blank:创建一个新的页面,在新的页面中刷新出href指定的内容。
注意:刷新当前网页和在当前网页中跳转到指定位置的时候,只能使用默认的_self

四、表格标签

1、表格标签:table标签、tr标签、td标签
table标签:表格整体(一个table标签代表一个表格)
tr标签:行(一个tr标签代表表格中的一行)
rd标签:单元格(一个td代表一个单元格)
th标签:表头
2、属性
border属性;设置表格边框的宽度(只能作为table)
bordercolor:设置边框颜色(只能作业于table)
background:设置背景图片
bgcolor:设置背景颜色(可以作用于table、tr、td)
cellspacing:单元格与单元格之间的间距。(默认是1)
cellpadding:单元格与单元格中的内容的间距。
width:一般作用于某个单元格,但是影响一列。
height:一般作用于行。影响一行。
align:设置对齐方式(可以作用于table、tr\td) 作用于table时,让整个表格在浏览器中居中; 作用于tr/td时,让内容在单元格中居中。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,835评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,598评论 1 295
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,569评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,159评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,533评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,710评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,923评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,674评论 0 203
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,421评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,622评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,115评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,428评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,114评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,097评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,875评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,753评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,649评论 2 271

推荐阅读更多精彩内容

  • 浏览器请求数据过程 1.URL http://127.0.0.1/index.html(浏览器会自动添加80) h...
    菜鸟白泽阅读 679评论 0 0
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,630评论 1 92
  • HTML需要掌握标签 标签(空格分隔): H5+CSS [TOC] 常用标签 img 注意点 和H系列标签/p标签...
    袁俊亮技术博客阅读 2,029评论 1 8
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 3,390评论 0 0
  • 牛郎卖了牛,好不容易攒够了织女回南天门的钱,他们商量让织女偷点东西回凡间来做生意,谁知织女一回去便开始发展天庭...
    单田喜阅读 104评论 0 0