HTML（网站搭建，标签，元素）
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
基础的格式：如下
- <!DOCTYPE html>
- <html>
- <head>
- ...//这里可以控制头文件
- </head>
- <body>
- ...//这里就是主干部分
- </body>
- </html>
对于头部文件标签使用及相关作用
——<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
- 1<meta charset="utf-8">
//这个就是起着一个声明的作用，charset=”utf-8”是告知浏览器此页面属于什么字符编码格式，下一步浏览器做好“翻译”工作
2<title>在这里可以控制网站标题</title>
/ /元素title中间控制的即为图片中显示的文字
- 3<meta name="..." content="HTML, CSS, XML, XHTML, JavaScript">
( <meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析)
作用 ·name="keywords"//为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
·name=description//为网页定义描述内容:（具体的意思就是如图所示的部分）
<meta name="description" content="免费 Web & 编程 教程">(
//非双斜线的部分就是content后面所描述的内容)
·name="author"//定义网页作者:
<meta name="author" content="Runoob">·每多少秒钟刷新当前页面:
<meta http-equiv="refresh" content="30">总结元素meta的一般使用方法：name后面接功能，content接内容。
- 4 <base href="http://www.runoob.com/images/" target="_blank"> （target可以参考后面第三版的“元素使用介绍”）
//<base> 标签描述了基本的链接地址（默认的URL）/链接目标(默认的target)，该标签作为HTML文档中所有的链接标签的默认链接
解释：1.对于此例子中targe在标签base上已经进行的基础的设置，即无论在后面body段书写链接时是否加上target="_blank"，打开的链接均会以blank的形式打开（target=“_blank”即重新打开一个窗口去显示对应的网页）
2. 对于标签base中的元素href后紧跟的地址的解释为：<base> 标签为页面上的所有的相对链接规定默认 URL
*URL:Uniform Resource Locators(统一资源定位器)
*URL的基本结构：
scheme://host.domain:port/path/filename
- scheme - 定义因特网服务的类型。（最常见的类型是 http）
{ 这里简单介绍一下互联网的协议（未学习）}
- host - 定义域主机（http 的默认主机是 www）
- domain - 定义因特网域名，比如 runoob.com
- :port - 定义主机上的端口号（http 的默认端口号是 80）
- path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
- filename - 定义文档/资源的名称
*对于此例子的URL的拆解：
- scheme- http（未加密协议）
- host -www
- domain -runoob.com
- port -80（未写，可能是因为默认）
- path -images
filename - 在此列中的base标签里没有书写，因此在后续body结构里对于一些需要引用的URL（href）可以只书写filename，可以节省时间
- 5<link rel="stylesheet" type="text/css" href="styles.css">
* <link> 标签定义文档与外部资源的关系（类似于一个引用）
*<link> 标签最常见的用途是链接样式表
##第一： 标签link的常用基础框架解释 *rel-值（详细的值可以参考下面留下的链接1）
*type-描述的样式
*href-后面接需要引用的对应文档位置
##第二： link标签常用的两个值---外部的样式表（stylesheet）-----用于浏览器的栏目图标和收藏夹图标（icon）
*第二个值的使用结构<link rel="icon" href="">//既可以实现web图标
6 <style type="text/css"> body {background-color:yellow} p {color:blue}
————*<style> 标签定义了HTML文档的样式文件引用地址
*在<style> 元素中你也可以直接添加样式来渲染 HTML 文档
*如需链接外部样式表，请使用 <link> 标签
*在头部书写
提示：关于web的渲染需要了解css，这里推荐查看文章“CSS 样式渲染”
7 <script> document.write("Hello World!") </script>
————*<script> 标签用于定义客户端脚本（ JavaScript）
*<script> 元素既可包含脚本语句，也可以通过 "src" 属性指向外部脚本文件
注意：如果使用 "src" 属性去引用外部脚本时
* <script> 元素必须是空的
*同时对应标签script的书写不能采用省略形式即不能<script type="text/javascript" src="script/code3.js"/>
正确的引用书写如下
————
<script type="text/javascript" src="script/code3.js"></script>提示：关于脚本推荐学习Javascript，三贱客！
8<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>
————*noscript 元素用来定义在脚本未被执行时的替代内容（文本）
详细的使用即如下：
<script> document.write("Hello World!")</script><noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>
对于body结构里一些元素的介绍与使用
1 基础的一些搭建元素
*<h1>这是一个一号标题，标题可以从1到6，标题字体逐步变小</h1>
*<p>这是一个普普通通的段落</p>
*<a href="对于的链接" style="" target="">这里可以输入文本形成超链接</a>——这里的关于超链接是可以用到嵌套的，可以和img元素形成嵌套（打广告）
*<img src="" alt="" width="" height=""/>——·这里注意格式是省略形式，正常可以写成<img.....></img>
——·alt的作用是替换文本，即当src无法被显示的时候，用alt后的文本去替换
*HTML文本格式化标签
2 一些功能性元素
*<pre>中间写的一系列结构都不会被网站自动排序，即保持HTML文档的书写形式</pre>
*<br/>单独使用充当换行的作用
* id 给某一个元素<>命名，然后使用href去引用对应id的段落
<a href="#C4">查看章节 4</a> <h2 id="#C4">章节4</h2>*<abbr title="etcetera">etc.</abbr>这个是实现缩写的元素
*<acronym title="World Wide Web">WWW</acronym>这个是实现首字母缩写的元素
*<span style="color:blue">蓝色</span> 此元素可以对文档进行部分加工，一本嵌套与之内 如下：
<p>我的母亲有 <span style="color:blue">蓝色</span> 的眼睛。</p>*<address>这里面可以书写web的地址信息，一般要用<br/>去强制分行，可以使里面字体自动斜体</address>
*<p><bdo dir="ltr">一二三四五六七八九十</bdo></p>
bdo元素是控制文字流反向的元素 后面的dir可接ltr（从左向右）和rtl（从右向左）来控制文字流向
*href=""//在元素href后接的URL,常常用于网站的链接
3 列表的相关元素介绍（列表项内部可以使用段落、换行符、图片、链接以及其他列表等）
1.有序列表常用元素标签——*<ol></ol>(有序列表始于 <ol> 标签)
——可以在ol中添加start=“数字/大小写字母”标签实现人为规定有序列表的开始数 如下：
<ol start="50"><li>Coffee</li><li>Tea</li><li>Milk</li> </ol>*<li></li>(每个列表项始于 <li> 标签)
————每一列可以不需要强制换行标签<br/>
2.无序序列常用元素标签————*<ul></ul>(无序列表始于 <ul> 标签)
*<li></li>(每个列表项同样始于 <li> 标签)
注意： 在 HTML 4中 ul 属性已废弃，HTML5 已不支持该属性，因此我们使用 CSS 代替来定义不同类型的无序列表如下：
<ul style="list-style-type:disc">//更多的样式可以进一步学习CSS//这里简单的介绍几种无序序列的样式<li>Apples</li>//disc是实心圆点 circle是圆圈 square是正方形<li>Bananas</li><li>Lemons</li><li>Oranges</li> </ul>3.自定义序列常用的元素标签————*<dl></dl>(自定义列表以 <dl> 标签开始)
*<dt></dt>(每个自定义列表项以 <dt> 开始)
*<dd></dd>(每个自定义列表项的定义(就是关于dt的一些补充说明)以 <dd> 开始)
4.嵌套列表：
<ul><li>Coffee</li><li>Tea<ul><li>Black tea</li><li>Green tea<ul><li>China</li><li>Africa</li></ul></li></ul></li><li>Milk</li> </ul>
4 表格的制作————
基础的标签： *<table></table>(表格由 <table> 标签来定义)
*<caption></caption>(使用captain去定义带有标题的表格)
*<tr></tr>(用标签tr去定义表格某一列)
*<th></th>定义表格的表头（加粗）
*<td></td>(用标签td去定义表格某一列中的数据单元格的内容)
提示：数据单元格的内容（包含文本、图片、列表、段落、表单、水平线、表格等）
示例如下：
<table border="1"><tr><th>Header 1</th><th>Header 2</th></tr><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr> </table>web显示：
提示（以下元素常在在th/td标签中书写）：1. 表格制作的跨行跨列—*使用元素rowspan="number"（跨行）、colspan="number"(跨列)
2.border="1" 控制单元格 th/td 的边框
3.cellpadding=""控制单元个上下边距
4.cellspacing="0"控制单元格互相间的距离
HTML表单与框架
1 HTML 简单表单——
*<form></form>//表单使用表单标签 <form> 来设置
提示：在<form action="">中的action是至表单form里录入的数据接受的地方
tip：action后可以接——<form action="MAILTO:someone@example.com" method="post" enctype="text/plain">//发送电子邮件
* 文字<input type="text" name="user"><br>//因为input标签在form标签里前面的文字会在网站上显示，一般需要搭配<br/>换行
*输入input的type有很多种 Checkboxes*text（普通文本）
*password（密码文本，用黑点代替）
*radio(单选按钮) 使用如下：
<form> <input type="radio" name="sex" value="male">Male<br> <input type="radio" name="sex" value="female">Female </form>*Checkboxes（复选按钮）使用
如下：
<form> <input type="checkbox" name="vehicle" value="Bike">I have a bike<br> <input type="checkbox" name="vehicle" value="Car">I have a car </form>*submit（提交按钮）reset（重置按钮）//常常直接连接在一般input的后面，去实现传输用户数据的作用。如下：
<form name="input" action="html_form_action.php" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> <input type="reset" balue="reset"> </form>
2 关于实现表单某些功能的标签————
*下拉表单——*<select></select>//与input类似，不过是给用户直接选
*<option></option>//定义可选的内容（提示：在option中可以添加一个元素selected去实现预选表单）
操作实列：
form action=""> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat" selected>Fiat</option> <option value="audi">Audi</option> </select>*创建按钮——<input type="button" value="Hello world!">//这里我认为可以和submit合起来
*文本域——<textarea rows="10" cols="30">我是一个文本框</textarea>
*设置表单边框——<fielset>(定义了一组相关的表单元素，并使用外框包含起来)//紧跟form后 *<legend></legend>定义表单边框的标题
示例：
form><fieldset><legend>Personalia:</legend>Name: <input type="text"><br>Email: <input type="text"><br>Date of birth: <input type="text"></fieldset> </form>
HTML（网站搭建，标签，元素）相关推荐
- 网站搭建从零开始（七） WordPress站点的完善
1.WordPress网站前后端常用语言简介和运行过程 通常一个网站的整个构建过程中需要大量的技术支持,尤其是用到很多种计算机语言.网站的构建主要分后端和前端两部分,后端代码在服务器上运行,而前端程序 ...
- Spark项目实战:购物网站评价标签生成(非常详细的Spark算子操作)
实战概览 一.项目简介 1. 需求 2. 内容 二.项目的开发环境 三.项目代码编写 1. 项目搭建 2. 分析原始的数据 3. 编写JSON解析类 4. 编写数据处理类 5. 将项目打包成jar提交 ...
- 有些框架自动重写html标签,充分利用HTML标签元素 – 简单的xtyle前端框架
充分利用HTML标签元素 – 简单的xtyle前端框架 Sponsor 目前很多设计师.前端人员都喜欢使用Bootstrap这个前端框架用来搭建网站,确实是很强大,但是体积有点大了.所以除了Boots ...
- 网站搭建时常用组件及样式
网站搭建时常用组件及样式 前言 一.CSS 1.div圆角 2.边框阴影 3.div水平分布 4.div水平分布自动换行 5.Transform 6.文本两端对齐 7.针对于不同屏幕大小的样式 7.1 ...
- 远程服务器php环境搭建,免费网站搭建与phpstorm远程部署
免费网站搭建 我是用gmail绑定的,密码是我常用的那套. 站点列表 1个账号可以免费搭建多个站点.每个站点的后台都是php+mysql,版本都可换. 这个页面及其重要. 下面的detail可以查看每 ...
- j2ee 简单网站搭建：（十）jquery ztree 插件使用入门
为什么80%的码农都做不了架构师?>>> <j2ee 简单网站搭建:(一) windows 操作系统下使用 eclipse 建立 maven web 项目> < ...
- html中图片的属性优化,Html标签元素在SEO中的优化方式（二）
接上html标签元素在SEO中的优化方式(一)中对HTML界面的介绍,我们今天继续补充HTML标签的SEO优化方式 在内容中有几个值得去研究一下的优化元素--导航和内部链接:很明显的一点,建立导航会使 ...
- Day2 HTML基本标签元素
Day2 HTML基本标签元素 HTML:超文本标记语言(HyperText Mark-up Language ) 1.作用:写网页结构 2.HTML不区分大小写,建议小写 3.文件后缀 ...
- [个人网站搭建]·Django增加评论功能(Python3)
[个人网站搭建]·Django增加评论功能 个人主页--> https://xiaosongshine.github.io/ 个人网站搭建github地址:https://github.com/ ...
最新文章
- Owncloud-X安装配置
- linear,swizzle,tile
- web service 基础学习
- 常微分方程I ODE的例子1 弹簧的振动、RLC电路与单摆
- serialVersionUIDtransient
- Mvc系统学习9——Areas学习
- MySQL中 JSON 数据类型应用
- JBDC操作事务源码解析
- 分布式系统关注点(8)——99%的人都能看懂的「熔断」以及最佳实践
- python之django中models学习总结
- 7.Linux 高性能服务器编程 --- Linux 服务器程序规范
- win7 64位系统安装HP LaserJet 5100 PCL 6
- 操作系统系统笔记整理
- 【Python数据分析】二手车价格预测
- 在北京租房都多交两个月的房租吗？怎么不通过中介找到合意的房子？
- java-net-php-python-ssm电子班牌系统计算机毕业设计程序
- 操作系统 - 存储器管理系统
- 公众号文章排版样式——隐藏样式
- DBeaver 操作数据库
- php5.5安装大商创,铁杆粉整理 - 大商创X宝塔完整安装教程