html基本标记

专业名词：
前端：用来把美工的图片实现代码化
工作职责：制作移动端 pc(电脑) 页面布局+特效（js jquery...）

sublime webstrome hbuilder dw(老牌)
html dw
div css sublime
后边内容 webstrome
用dw 创建页面：
新建--》空白页--》html --》创建
保存页面：ctrl+s

网页文件的构成：
html
divcss
javascript
jquery
php jsp程序

前端提供的页面后缀： .html .htm .shtml ****

html 语法构成：
html 扩展的标记语言
标记语言： <英文单词或字母组合> <a> 网页文件使用字母符号组成的标记

标记单标记双标记
单标记： <字母组合属性=属性值属性=属性值 ... /> /关闭
双标记： <字母组合属性=属性值属性=属性值 ...>内容</字母组合>
<img width height border>
属性是用来修饰和补充标记的

dw 创建文件初始代码：
网页文档的声明：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
DOCTYPE document type 简写文档类型
html 网页
PUBLIC 公共的开放的所有人都可以看到源代码
W3C 国际组织
DTD 文档类型定义
XHTML 1.0 版本号
Transitional 过度 strict严格 frame框架
EN 英文
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd 规范网址

<html></html> 网页标记
xmlns=http://www.w3.org/1999/xhtml 命名空间定义了网页上所有标记名称

<head></head> 头标记
<meta> 网页信息的描述标记
http-equiv="Content-Type" 内容类型
content="text/html; charset=utf-8"
内容：文本编写网页文本是有特殊含义
charset=utf-8
字符集： utf-8
utf-8 国际标准字符集： 128中语言特殊符号其他符号
gbk 字符集：中文字符集中文英文特殊符号其他符号
gb2312 国内标准字符集：简体中文英文特殊符号，其他符号

<title>无标题文档</title> 网页的标题
<body></body> 身体
标记和属性：
正常文字：文字是原版显示的
缩进：tab键--》4个空格
<br /> 换行
注意：在浏览器中对于大段空白区域---》空格
<p> </p>段落标记前后加一空行，在加换行

在页面上想输出 <br />-->浏览器认为是一个控制符号控制换行
实体：特殊符号用字母来标识，浏览器认为是普通的字母了，
显示的时候显示的是特殊符号

< < & shift+7
> &gt
" "

<img> 图片标记网页图片是通过一个网络路径引用进来的图片
src="图片路径"
相对路径规则： index.html 网页文件 ******
平级：文件名称
下一级：文件夹名称/文件名称
上一级 : ../文件名称
绝对路径规则：
d:/html/1.jpg
盘符:/路径/路径..../文件名称
width="数字" 宽度
height="数字" 高度
注意：宽高没有改变图片大小的，相当于用缩小镜去看图
border="数字" 图片的边框数字代表边框的厚度，0没有边框

<a></a> 超链接标记：点击打开新页面的元素

外网：
href="全路径";
内网：自己页面 ---》自己的页面
平级：文件名称
下一级：文件夹名称/文件名称
上一级 : ../文件名称

描点：自己连接自己页面上的一部分
上面定义方式<a href="#id"></a>
描点定义：<a id="id"></a>

一、字体标记：
<b></b>加粗
<strong></strong> 加粗
<i></i>倾斜
<sub></sub>下标
<sup></sup> 上标

二注释：


三 table标记：表格
<table></table> 表格
<tr></tr> 行
<td></td> 单元格（列）

table中的属性：
主要属性
border="n" 边框默认 n=0
width="n" 宽
height="n" 高
注意：默认宽高是评分 width 和 height的但是每个单元格字数不同，
宽度比例不同
align="left左 center中 right右"
cellspacing="20" 边框的厚度
cellpadding="60" 文字到边框的距离
0 文字都贴着左边
当文字到边框的距离 < 初始值，就是初始值
当文字到边框的距离》初始值，四边就都60（实际的值）
其他属性：
bgcolor="#FF0000" 背景色
background="imgs/1.jpg" 当背景图宽高 > 表格宽高选取左上角开始的一部分作为背景图****
注意：当背景图和背景色同时存在，背景图起作用

tr 属性：控制一行
height="60" 行高
align="left center right " 行中内容左中右
valign="top上 middle中 bottom下"

td
width
height
注意：当列中的属性和行中属性有冲突的时候，以列中的属性为准** 就近原则
align="right" 左中右
valign="top" 上中下

colspan="n" 合并列
rowspan = "n" 合并行

  页面输出的空格一个空格是一个英文字符的位置

一表单元素：
1.什么是表单元素：
表单元素：是与客户交互，一种页面元素
用来填写选择按钮元素 ---》表单元素

交互：人在设备上进行的任何操作，都是一次交互
手机滑屏点击超链接图片音乐视频都是交互
填写电脑会员信息交互 ....

2.表单元素有哪些：
<form> action="b.html" 提交接受数据的页面遵循相对路径规则
method="get/post"
get 2k 路径后有提交的数据不安全
post 没有大小限制路径后不显示提交数据安全
表单元素
</form>
input元素
<input type="" />
type元素类型
text 文本框 name="页面中的称呼" id="序号（字母数字）与js结合使用"
value="默认值"
password 密码框 name="uPwd" id="id页面中不能重复";
checkbox 复选框 name="" id="" checked="checked" value="2"
radio 单选框: name="sex" checked="checked" id=""
file 上传控件 name="upload"
hidden 隐藏域：隐藏控件：与后台程序交互

按钮：
button: 普通按钮与javascript结合制作效果
submit: 提交按钮数据从a页面发送到b页面***
reset ：让所有表单元素回到默认值
image : 图片提交按钮和submit一样可以很好看
src="imgs/1.jpg"
非input元素
<select> 下拉列表
<option value="1">北京</option>
<option value="2" selected="selected" 默认选项>上海</option>
<option value="3">天津</option>
</select>
多行文本框 <textarea>fdsafadsf</textarea>
cols="30" 列 --》宽度
rows="8" 行 --》高度

posted @ 2018-04-26 15:44 LloydDracarys 阅读(390) 评论(0) 收藏举报

刷新页面返回顶部

LloydDracarys

html基本标记

公告