给大家分享一些基础知识【黑马web前端】

更新时间:2019年07月26日 10时54分03秒来源:黑马程序员论坛

第一HTML中的常用排版标签

1、排版标签
1）标题标签 h
标签语义：作为标题使用，并且依据重要性递减
2）段落标签 p
标签语义：可以把 HTML 文档分割为若干段落
3）水平线标签 hr
标签语义: 使得文档结构清晰，层次分明。<hr/>是单标签。
4）换行标签 br
标签语义: 使段落中的某段文本强制换行显示。
5）div 和 span
这两个没有语义，他们的方法和特点是:

div标签用来布局的，但是现在一行只能放一个div

span标签用来布局的，一行上可以放好多个span

2、文本格式化标签

加粗标签： <b>单纯的加粗</b> <strong>语义化强调</strong>

倾斜标签： <i>单纯的加粗</i> <em>语义化强调</em>

删除线标签： <s>单纯的加粗</s> <del>语义化强调</del>

下划线标签： <u>单纯的加粗</u> <ins>语义化强调</ins>

3、图片标签

1) img标签,单标签，<img />,必须配合src属性将图片引入html页面，<img src=“图片路径” />

2) src 属性值 --- url 图像路径

alt 属性值 --- 自定义文本图像不能正常显示的时候替换文本；

title 属性值 --- 自定义文本鼠标移入图片显示提示文本；

width 属性值--- 自定义数值设置图片的宽度；

height 属性值 --- 自定义数值设置图片的高度；

4、超链接a

a标签，双标签

<ahref=”链接路径”></a>

href用于指定链接目标的url路径地址，必不可少的；

target用于指定链接页面的打开方式，属性值我们一般选择新窗口打开 _blank

5、代码注释

html注释：

css注释：/* 注释内容 */

快捷键：Ctrl+？

添加注释的作用：说明代码的含义，更好的管理代码的可读性，程序是不会对注释的代码进行解析的

第二html的基本结构:

<!DOCTYPEhtml>

<htmllang="en">

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

其中<!DOCTYPE html>让浏览器用H5的标准来解析代码，

语言：lang="en" 当前网页所在国家的语言，一般en表示英文，zh-CN 表示中文

字符集：<meta charset="UTF-8"> 用来对我们书写的字符进行对应国家文字的编译

常用的字符编码：Gb2312简体中文 BIG5 繁体中文 GBK 全部中文（包括简体和繁体中文）最重要：（UTF-8）：全世界所有国家需要用到的字符

head 标签里面的内容是给浏览器解析的，用户只能看到title标题；

body 标签里面的内容是给用户看的；

第三 HTML标签关系

嵌套关系 --- 父子级关系；并列关系 --- 兄弟关系

第四表格

1）基本结构

一对table标签嵌套tr标签，tr标签嵌套td标签；

table表示表格整体，tr表示行，td表示单元格（列）；

<table>

<tr>

</tr>

</table>

2）表格的常见属性：

宽：width；高：height；边框：border，如果设置border=0是没有边框；

对齐方式：align 取值left、center、right；设置表格在网页中的水平对齐方式；

单元格和单元格之间的距离：cellspacing

单元格内容到单元格边框的距离：cellpadding

3）表格表头标签th

tr嵌套th书写，默认是加粗居中显示的效果；

<tr>

</tr>

4）表格标题标签caption

<tablewidth="800">

<caption>表格标题标签</caption>

<tr>

</tr>

</table>

第五列表

1）无序列表

结构：ul嵌套li标签；

<ul>

</ul>

2）有序列表：ol嵌套li标签；

<ol>

</ol>

3）自定义列表：dl嵌套dt和dd标签；

<dl>

</dl>

第五表单

1）表单的input控件

input的常见属性

type 类型

value默认值

name属性的作用：在存在多个input表单的时候，设置不同的name取值进行区别，一般是后台工作人员去使用；

input文本控件

所有的input控件都是通过更改type的取值不同实现不同的效果；

文本框：input的type取值为text <input type=“text” />

可以设置value属性设置默认的值，<input type=“text” value=“默认值” />

密码框：input的type取值为password <input type=“password” />

单选按钮：type=“radio” ,想要实现单选效果我们需要给input标签设置相同的name进行设置归为一类； <inputtype="radio" name="sex">

复选按钮：type=“checkbox”，也可以设置同样的name名称，但是不会影响多选的效果； <inputtype="checkbox" >

注意：如果想要实现单选按钮和复选按钮默认选中效果我们就需要设置对应的属性checked=“checked”

单选按钮 <inputtype="radio" checked="checked“ >

复选按钮 <inputtype="checkbox" checked="checked" >

input按钮控件

普通按钮：<input type=“button” value=“普通按钮” /> 必须要自己设置value值；

提交按钮：<input type=“submit” />；可以设置自己的value值也可以用默认的；

重置按钮：<input type=“reset” />；可以设置自己的value值也可以用默认的；

图片按钮：<input type=“image“ src=”图片路径” /> src属性必须书写查找图片路径；

标签按钮：<button>我是标签按钮</button>file:///C:/Users/Arwin/AppData/Local/Temp/msohtmlclip1/01/clip_image002.jpg

文件域名：<input type=“file” /> 上传文件使用；

2）label标签

作用：

提高用户体验，扩大input表单的可操作性，点击文字可以直接将光标定到输入框，不是表单标签；

使用方法：

方法1：用label直接包括input表单 -----

<label>用户名：<input type=“radio” name=“usename” value=“请输入用户名” /> </label>；

方法2：用for 属性规定 label 与哪个表单元素绑定 ----

<labelfor=“nan”>男</label> <input type=“radio” name=“sex” id=“nan“ />

3)textarea文本域标签

双标签

文本框input和文本域textarea的区别：

input只能显示一行文本，单标签，通过value设置默认值，一般适用于用户名，昵称，密码等；

textarea可以显示多行文本，双标签，一般适用于留言板等；

4)select下拉列表

下拉列表的结构：一对select标签嵌套多对的option标签

</select>

如果option有selected=“selected”表示默认选中；

<optionselected="selected">北京</option>

</select>

5) form表单域标签（重要）

作用：

在HTML中，form标签被用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。

推荐了解热门学科

java培训	Python人工智能	Web前端培训	PHP培训
区块链培训	影视制作培训	C++培训	产品经理培训
UI设计培训	新媒体培训	产品经理培训	Linux运维
大数据培训	智能机器人软件开发

传智播客是一家致力于培养高素质软件开发人才的科技公司，“黑马程序员”是传智播客旗下高端IT教育品牌。自“黑马程序员”成立以来，教学研发团队一直致力于打造精品课程资源，不断在产、学、研3个层面创新自己的执教理念与教学方针，并集中“黑马程序员”的优势力量，针对性地出版了计算机系列教材50多册，制作教学视频数+套，发表各类技术文章数百篇。

传智播客从未停止思考

传智播客副总裁毕向东在2019IT培训行业变革大会提到，“传智播客意识到企业的用人需求已经从初级程序员升级到中高级程序员，具备多领域、多行业项目经验的人才成为企业用人的首选。”

中级程序员和初级程序员的差别在哪里?
项目经验。毕向东表示，“中级程序员和初级程序员最大的差别在于中级程序员比初级程序员多了三四年的工作经验，从而多出了更多的项目经验。“为此，传智播客研究院引进曾在知名IT企业如阿里、IBM就职的高级技术专家，集中研发面向中高级程序员的课程，用以满足企业用人需求，尽快补全IT行业所需的人才缺口。

何为中高级程序员课程?

传智播客进行了定义。中高级程序员课程，是在当前主流的初级程序员课程的基础上，增加多领域多行业的含金量项目，从技术的广度和深度上进行拓展。“我们希望用5年的时间，打造上百个高含金量的项目，覆盖主流的32个行业。”传智播客课程研发总监于洋表示。

黑马程序员热门视频教程【点击播放】

Python入门教程完整版（懂中文就能学会）	零起点打开Java世界的大门
C++\| 匠心之作从0到1入门学编程	PHP\|零基础入门开发者编程核心技术
Web前端入门教程_Web前端html+css+JavaScript	软件测试入门到精通

上海中心

给大家分享一些基础知识【黑马web前端】

相关阅读