前端(1)——HTML标记语言

来源：互联网发布：蜂群算法 matlab 编辑：程序博客网时间：2024/05/21 10:59

工具的配置：

sublime

安装Sublime Package Control：

使用 Ctrl+` 快捷键打开 Sublime的命令行面板，复制粘贴：

import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

回车之后，就会发现在 Preferences 菜单下会多出两个子菜单：Package settings、Package Control

5、安装 Emmet 插件：

选择菜单：Preferences -> Package Control -> Install Package

输入：Emmet 回车

点击搜索结果中的 Emmet 条目，即可安装插件，完成后重启 Sublime

配置浏览器：

点击打开链接

——————————html————————————

————基本结构

<!DOCTYPE html><html lang="en">    <head>        <meta charset="UTF-8">        <title>Title</title>    </head>    <body>    </body></html>

1 / <!DOCTYPE>

文档类型,文档规范的定义

2 / <html>内容</html>

文档标记，开始标记。分别位于网页的最前端和最后端。表示开始和结束

3 / <head>内容</head>

文件头标记，用来包含文件的基本信息，比如网页的标题，关键字等。在head里面的内容不会在浏览器中显示

用于存放 title,mata,style,script,base,link

4 / <title>页面标题</title>

标题标记，网页的主题显示在窗口左上边。这个标记中不能包含其它标记。是放在head标记里面的。

5 / <meta>内容</meta>

这个标记必须放在head元素里面

1 / discription 页面描述。提供有关页面的元信息。SEO优化。

必须属性： content 值：some_text 比如针对搜索引擎和更新频度的描述和关键词

<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><meta name="discription" content="页面内容描述"><title>Document</title></head>

2 / keywords 关键词描述。提升排名的一种方式。
必须属性： content 值：some_text 比如针对搜索引擎和更新频度的描述和关键词

<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><meta name="discription" content="页面内容描述"><meta name="keywords" content="关键词"><title>Document</title></head>

3 / 字符集（编码格式）

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

6 / <body>页面主体</body>

用于存放所有的html结构标签。

————标签：

标签和被标签的内容构建html文档

格式：

<标签>内容</标签>

标签的属性：就是用来控制内容（图像，文本等）如何的显示

格式：

<标签属性1=属性值属性2=属性值.....> 内容 <标签>

————————————————————————————

1 / <h>内容</h>系列标签

标题标签（有默认属性）

2 / <p>段落内容</p>标签

P标签表示段落，默认段落间是有间隔的。

<p>这是一段文字</p>

3 / <hr />标签

在页面上显示一条横线，默认占整行

<hr />

4 / <br />标签

换行。

这是一行 <br /> 这是第二行

5 / 文本标签：

b,u,i,s,strong,em,del,ins

<body><b>这是b标签</b>  <!-- 加粗 --><i>这是i标签</i>  <!-- 倾斜 --><u>这是u标签</u> <!-- 下划线 --><s>这是s标签</s>  <!-- 删除线 --><hr /><strong>这是strong</strong>  <!-- 加粗 --><em>这是em</em>  <!-- 倾斜 --><ins>这是ins</ins>   <!-- 下划线 --><del>这是del</del>   <!-- 删除线 --></body>

6 / img标签

<body><img src="images/baidu.png" title="这是一张图片" alt="这是什么" /></body>

src属性是img特有属性。

img标签的属性：

1 / alt :图片加载不出来就显示alt里面的文字。

2 / title：鼠标移动到图片上显示的文字。
7 / <a></a>标签

超链接标签

<body><a href="跳转路径" target="_blank">跳转的按钮</a></body>

其他：

1 / href = "#" //href = #的时候，a标签不跳转

2 / a标签的“锚”——当前屏幕跳转到指定位置（通过id #指定跳转到某个id的位置）

    <a href="#tt" target="_blank">锚点</a>    <div id="tt" >第一章</div>

a标签的属性：

1 / href 跳转路径

2 / taget =“ _blank” :在新页面跳转

taget = "_self" 在当前页面跳转

3 / base ="_blank" 为页面中所有的a标签设置跳转，放置在head标签中

target href 是a标签独有的属性

8 / <div></div>标签

用来布局的标签。

9 / <span></span>标签

用来布局的标签。

————列表：

1 / <ul></ul>无序列表：

<li></li>

<body>无序列表：<ul><li><a href="#">列表1</a></li><li>列表2</li><li>列表3</li></ul></body>

<li>标签是一个容器，可以放其他标签。

2 / <ol></ol>有序列表：

<li></li>

<body>有序列表：<ol><li><a href="#">列表1</a></li><li>列表2</li><li>列表3</li></ol></body>

3 / <dl></dl>自定义列表：

<dt></dt>

<dd></dd>

<body>自定义列表：<dl><dt>大分类1</dt><dd>子类1</dd><dd>子类2</dd><dd>子类3</dd><dt>大分类2</dt><dd>子类1</dd><dd>子类2</dd><dd>子类3</dd></dl></body>

————表格：

1 / 表格标签

<table></tabel> 表格范围

<caption></caption> 表格标题

<tr></tr> 行

<th></th> 表头标签，放在表格的最上一行

<td></td> 列

<thead></thead> 存放当前列的表头。如果没有加css，页面默认将表头中的高度设置变小

<tbody></tbody> 存放表格中的主体数据。浏览器自动添加

<tfoot></tfoot> 一般情况不会出现

2 / 表格的属性
border = " " 表格边框

width = " " 表格宽度

height = " " 表格高度

align : 表格的显示位置：

——| left 居左显示（默认）

——| center 居中显示

——| right 居右显示

cellspacing：单元格之间的间距，默认2px

cellpadding：单元格内容与单元格边框的显示距离。单位像素。

frame：控制表格边框最外层的四条线框

rules：控制是否显示以及如何显示单元格之间的分割线

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title></head><body><table border="1" width="300" height = "200"><caption>表格标题</caption><thead><tr><th>序号</th><th>序号</th><th>序号</th><th>序号</th></tr></thead><tr><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td></tr></table></body></html>

————表单：

——表单元素：

1 / input 标签

属性：

① type 文本输入框

= text :文本输入框；

= password : 密码输入框；

= hidden :隐藏域；

= radio ：单选框（必须给每一个radio加一个相同的name属性）

= checkbox ：多选框

= button ：按钮

= reset : 重置（只能在form标签中起作用）

= image : 图片按钮

= submit : 提交

② value = “XXXX” 设置默认显示值（text,password,button，reset)

③ checked ="checked" 默认选择

④ name = "xxx" 相同name属性，将radio,checkbox作为一个选择集合

2 / <select></select> 下拉选单

属性：

① <option>内容</option> 选择内容

② selected= "selected" 设置默认选择

3 / <textarea></textarea>文本域

——form标签：

用来管理页面上的表单元素。表单元素必须放在form标签中。

属性：

action :将所有数据提交到action指定的页面（必须给要提交的标签放置 name 属性）

—————————

表单范例：

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>注册页面</title></head><body><form action="页面地址">用户名：<input type="text" value="默认显示值"><br/>密  码：<input type="password"><hr/><input type="hidden"><hr/>性  别：<input type="radio" name="sex">男 <input type="radio" name="sex">女 <input type="radio" name="sex" checked="checked">保密 <br/>爱  好： <input type="checkbox">篮球  <input type="checkbox">足球  <input type="checkbox" checked="checked">台球  <input type="checkbox">游泳 <br/>国  籍：<select><option>中国</option><option selected="selected">日本</option><option>韩国</option></select> <br/>签  名：<textarea>这里写默认值</textarea> <br/><input type="button" value="点击"> <input type="reset"> <br/><input type="image" src="images/baidu.png"> <br/><input type="submit"></form></body></html>

0 0