21总 web前端

1.web标准:

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

(1)..HTML

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


内容是不可见的


内容是可见的

(2).HTML中的标签

网页中的内容就是通过html中的不同的标签(标记)来确定
标签语法:
a.常规标签(双标签): <标签名 属性名1=属性值1 属性名2=属性值2...>标签内容
b.单标签:<标签名 属性名1=属性值1 属性名2=属性值2...> 或者 <标签名 属性名1=属性值1 属性名2=属性值2.../>
说明:
<>,:固定写法,html中所有的标签都是写在<>中的
标签名:不是随意命名的,而是一些固定的值,例如:

- p标签、a标签、b标签、h1标签、input标签、img标签等。
标签名前不能有空隙
属性:属性放在开始标签中,属性名和值之间用=连接,多个属性之间用空格隔开。属性可以是自定义的属性也可以是标签自带的属性
标签内容:双标签才存在标签内容,标签内容可以是任何东西(可以是文字也可以是其他的标签)
例如:
我是python


: 结束标签,单标签没有一个单独的结束标签

(3).基本语法

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

"http://www.w3.org/TR/html4/frameset.dtd">





学习HTML

body标签中的内容是在网页中可见的部分
html学习目标就是掌握body中的常用标签


今天开始学习web前端

1.文字标签:








我是标题1


我是标题2


我是标题3


我是标题4


我是标题5

我是标题6

2.段落标签: p
网页的内容中一个段落文字对应一个p标签
p标签的内容结束后会自动换行

注意:html中的文字是不会因为手动的回车和空格以及缩进产生空白效果(换行、空格、缩进无效)
但是可以通过一些特殊的符号,来产生特定的效果

空格符: 
强制换行:

-->


      随着今年苹果秋季发布会的闭幕,从 1(初代 iPhone)到 10(iPhone X),

新 iPhone 的命名即将用尽包括数字 10 以内的所有数字,

对于苹果来说,从明年开始,为新 iPhone 命名将会是一件头疼的事情。2÷10=0.2



实际上,去年苹果公司决定用罗马数字 X(读 ten)来命名开始,iPhone 已经步向了「命名荒」,
而进一步加剧这个情况的,则是今年的新 iPhone,由于新 iPhone 并没有巨大的变化,
所以它似乎并不足以获得一个全新的命名,比如说 iPhone Ⅺ (11)这样的称呼。

-3.文字效果:
a.加粗:b标签,strong标签
b标签:单纯的在样式上进行加粗
strong标签:除了将文字加粗显示外还有强调的意义

b.倾斜:i标签,em标签
em标签有强调的作用
-->

实际上,去年苹果公司决定用罗马数字 X(读 ten)来命名开始,iPhone 已经步向了「命名荒」,
而进一步加剧这个情况的,则是今年的新 iPhone,由于新 iPhone 并没有巨大的变化,
所以它似乎并不足以获得一个全新的命名,比如说 iPhone Ⅺ (11)这样的称呼。

4.水平线:hr
单标签
-->



列表标签:ul,ol,dl

ul:无序列表
ol:有序列表
dl:自定义列表
-->


  • 语文

  • 语文是个什么样的学科。。。。


  • 数学

  • 英语



  1. 北京

  2. 北京最大的特点是雾霾~


  3. 成都

  4. 天府之国


  5. 大连

  6. 美丽的海滨城市


  7. 重庆

  8. 辣妹儿+火锅


  9. 青岛




A


and

are

B

big

bpdy


2.图片和超链接:





图片和超链接


src属性:图片地址(可以是本地图片地址,也可以是远程服务器上的图片地址)
title属性:设置图片的标题(这个标题是鼠标停留在图片上等一会儿出现的文字)
alt属性:用来设置图片加载失败的时候出现的提示信息
-->
加载失败

加载失败

加载失败

加载失败

加载失败

加载失败

2.超链接标签:a标签
想要点击跳转的地方都可以使用超链接语法
注意:a标签的内容部分是可见的,是可以被点击
(1)href属性:跳转目标对应的地址
a.其他的网页地址 ----- 跳转
b.写本地的一个html路径 ------ 跳转
c.空 ------- 刷新当前网页(重新加载)
d.选择器 ------ 让网页跳转到指定的位置

(2)target属性:设置跳转方式
_self(默认值):在当前页中刷新出新的内容
_blank:创建一个新的页面,在新的页面中刷新出href指定的内容
注意:刷新当前网页和在当前网页中跳转到指定位置的时候,只能使用默认的_self
-->
百度一下
千锋
文本标签
刷新
第一张
第二张
第三张

.3.表格标签;




表格标签


2.属性
a.border属性: 设置表格的边框的宽度(只能作用于table)
b.bordercolor:设置边框颜色 (只能作用于table)
c.background:设置背景图片
d.bgcolor:设置背景颜色(可以作用于table\tr\td)
e.cellspacing:设置单元格与单元格之间的间距(默认是1)
f.cellpadding:设置内容和单元格之间的间距
g.width: 一般作用于某一个单元格,影响的是这个单元格对应的那一列
h.height: 一般作用于行,影响的是一行的高度
i.align:设置对齐方式(可以作用于table\tr\td)
作用于table,让整个表格在浏览器中居中
作用于tr/td,让内容在单元格中居中
-->





















姓名 成绩 是否留级
张三 90
李四 80


4.细线表格:





细线表格


XXX信息表























姓名 毕业院校
余婷


清华大学


5.不规则表格:









过程:先确定表格中最多多少行,然后再数每一行有多少个单元格。
再确定每个单元格是否有合并现象,如果单元格有行的合并就设置单元格的rowspan属性,
如果有列的合并就设置单元格的colspan的值。
-->









































你可能感兴趣的:(21总 web前端)