整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

html基础知识解析(一)

着岗位竞争的越来越激烈,而设计师掌握的技能要求也越多,设计师不光只会设计,而且也要懂(会)代码(会手写代码更会加金的),所以我们要做一位懂代码设计师,还好Jason在大学学过代码,毕业也做过一段时间的设计+前端,我将我在代码方面的知识总结分享给大家,赶紧往下看吧

基础认识

html语句是由标签+属性构成的

html 标签由开始标签和结束标签组成,开始标签是被括号包围的元素名,结束标签是被括号包围的斜杠和元素名,但某些 html 元素没有结束标签,比如 <br />、<img>,这类标签称为单标签。


属性的语法

1、写在标签的<>内,而且在标签代码之后,如<p *></p>

2、属性名=""(一定得是英文的引号,不能是中文的引号。其实不用引号对于它的显示没有影响,但加上引号为标准做法)

如 align="center" align为属性名 center left right是属性值

3、有的标签没有任何属性(<br>),有的标签虽然有属性,但可以不加上也不影响它的使用(<p></p>),但有的标签则是必须与属性连用方能正常显示(<a></a>)


网页的基本结构

<html>

<head></head>

<body></body>

</html>

html,head,body 是html代码必不可少的三大标签,其中

html标签:用于定义html文件的标签,这个标签意味着这个文件是一个html文件

head标签:里面的内容不能再浏览器中直接呈现,但它会用后台运作的方式为html页面提供种种功能

body标签:里面出现的内容会在浏览器中得到直接呈现,供读者浏览

必须要记住的标签和属性

放在<head></head>之间的

<title> </title>

<title> </title>标签定义html文档的标题。<title>与</title>之间的内容将显示在浏览器窗口的标题栏。


<meta>标签

<meta>标签类可以插入很多很有用的元素属性。常用的有以下四种:

<meta name="keywords" content="study,computer">

用来标记搜索引擎在搜索你的页面时所取出的关键词。

<meta name="author" content=“wutao">

用来标记文档的作者。

<meta http-equiv=“content-type” content=“text/html; charset=gb2312”>

用来标记你的页面的解码方式。

<meta http-equiv=“refresh” content=“5;url=http://www.xnc.edu.cn”>

用来自动刷新网页




放在<body></body>之间的

与文字相关的标签

文字标题

<h#> ... </h#>

#=1, 2, 3, 4, 5, 6

段(paragraph) <p>

空白占位符

换行<br>

文字的分区显示

<div align=#> ... </div> (#=left, center, right)

<i> 显示斜体文本效果。

<b> 呈现粗体文本效果。

<big> 呈现大号字体效果。

<small> 呈现小号字体效果。


无序列表

无序列表是由<ul>和<li>元素定义的:

<ul>

<li>sports</li>

<li> food </li>

<li> drink </li>

<li> friends </li>

</ul>

<ul>和<li>中均可加入type属性,type的属性值有:disc(圆)、circle(圆圈)、square(方块)

有序列表 start 值为数字

有序列表由<ol>和<li>定义:

<ol>

<li>sports</li>

<li> drink</li>

<li> friends</li>

</ol>

....................................................................

我的微信公众号:UI严选 —越努力,越幸运

JS中拼接html字符串,遇到的坑往往是由书写格式引起的

注意以下几点:

  1. 单双引号需嵌套使用;
  2. 传入 JSON 对象需要使用 JSON.stringify() 序列化为一个 JSON 字符串,并且更需要注意单双引号嵌套问题。

示例:

let html = "";
for(var i=0;i<data.length;i++){
 html += '<tr>'+
 '<td>'+ data[i].appName +'</td>'+
 '<td>'+ '<button type="button" onclick="edit('+JSON.stringify(data[i]).replace(/\"/g,"'")+')">按钮1</button>'+'</td>'+
 '<td>'+ "<button type='button' onclick='del("+JSON.stringify(data[i])+")'>按钮2</button>"+'</td>'+
 +'</tr>'
}

上述代码中,使用了两种不同的引号嵌套格式。按钮1外层使用单引号,因此需要将JSON字符串中所有双引号转化成单引号,比较繁琐。从语法角度考虑,JavaScript 字符串与 JSON 字符串的最大区别在于,JSON 字符串必须使用双引号(单引号会导致语法错误),因此不推荐此写法。

推荐第二种写法,直接在外层嵌套双引号,无需进行额外操作。

性为 HTML 元素提供附加信息。

HTML 属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息

属性总是以名称/值对的形式出现,比如:name="value"

属性总是在 HTML 元素的开始标签中规定。

属性实例

HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定:

<a href="http://www.w3school.com.cn">This is a link</a>

更多 HTML 属性实例

属性例子 1:

<h1> 定义标题的开始。

<h1 align="center"> 拥有关于对齐方式的附加信息。

属性例子 2:

<body> 定义 HTML 文档的主体。

<body bgcolor="yellow"> 拥有关于背景颜色的附加信息。

属性例子 3:

<table> 定义 HTML 表格。(您将在稍后的章节学习到更多有关 HTML 表格的内容)

<table border="1"> 拥有关于表格边框的附加信息。

HTML 提示:使用小写属性

属性和属性值对大小写不敏感

不过,万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。

而新版本的 (X)HTML 要求使用小写属性。

始终为属性值加引号

属性值应该始终被包括在引号内。双引号是最常用的,不过使用单引号也没有问题。

在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:

name='Bill "HelloWorld" Gates'

HTML 属性参考手册

我们的完整的 HTML 参考手册提供了每个 HTML 元素可使用的合法属性的完整列表:

下面列出了适用于大多数 HTML 元素的属性: