码迷,mamicode.com
首页 > Web开发 > 详细

html基础

时间:2018-05-15 11:51:51      阅读:257      评论:0      收藏:0      [点我收藏+]

标签:衣服   分区   外部   容器   跳转   窗口   通过   合并单元格   字符   

1、web的标准构成:html、css、JavaScript

html:web的结构层,好比人的骨骼,作为人体的骨架,支撑着整个身体。html是作为web的基础结构支撑。

css:web的表现层,好比人的皮肤、衣服,可以让人体外表更加好看。css是给web添加各种样式。

JavaScript:web的交互层,好比人的肢体工作,精美的动作或者舞蹈,在外貌的基础上能够更加体现人的活力、魅力,能有产生跟多的社交。JS给web添加各种交互动作。

2、html的固定标记格式

<html>
      <head>
               <title>标题</title>
      </head>
      <body>

                 内容
      </body>
</html>

3、字符集

charset:表示字符集,meta是标签,meta charset表示字符标签,meta charset=‘utf-8‘
utf-8:是最常用的字符编码格式,包含了全世界所有国家的字符。开发过程中基本使用该字符,避免兼容性。另外常用的还有gbk和gb2312
bg2312:简体中文,代表国标2312,包括6736个汉字
big5 :繁体中文,港澳台等地区多用。
gbk:是所有中文汉字,包含简体和繁体,是gb2312的扩展。加入繁体字的支持。

4、html标签

h1~h6:内容标题,不是页面网页头部标题,为了网页更语义化,一般提供6个级别标题,h1、h2、h3、h4、h5、h6。

P:段落标签,基本格式<p>段落内容</p>。

br:换行标签,英文是break,基本格式<br />,属于单标签。

hr:水平线标签,英文是horizontal,基本格式是<hr />属于单标签。

div:是division的缩写,分隔分区的意思。是网页布局中的重要盒子,主要配合css来做页面布局。

span:跨度范围意思,也是网页布局中重要盒子,配合css。

 image:图像标签,属于单标签,跟换行标签<br />、直线标签<hr />一样,都属于单标签,语法为<img src="图像url" />,其中src是路径属性,“图像url”是路径的值。

a: 单词缩写:anchor,锚,铁锚。链接标签,语法:<a href=“跳转目标” targer=“目标窗口的弹出方式” >文本或者图像</a>

      href:用于制定链接目标的url地址,当标签应用href属性时,它就具有很强大链接功能。 hypertext reference的缩写,意思是超文本引用。

     targer:用于制定链接页面的打开方式,取值有self和blank两种,其中默认为self,blank为在新窗口中打开的方式。

     注意:外部链接需要添加http://www.baidu.com

     内部链接直接链接内部页面名称即可,比如<a href="index.html">首页</a>。如果但是没有确定的链接目标时,用链接标签的href属性值定义为”#”即“href=“#‘’,

     表示该链接为一个空连接。不仅可以创建文本超链接,在网页中各种网页元素,图像,表格,音频,视频都可以添加超链接。

锚点定位:通过创建锚点链接,用户能够快速定位到查找内容。

①、使用<a href=“# id名字”>链接文本</a>
②、在定位的文本位子标注id名字。比如<h2 id="id名字">定位的文本</h3>

base:base标签,设置页面中整体链接的打开状态,比如设置所有链接在新窗口打开。在head标签里输入<base target="_blank"/>,base标签也是单标签。

 注释标签:语法<!--注释内容-->

ul:无序列表标签,列表没有顺序级别之分是并列的。语法为:

      <ul>
         <li>列表项1</li>
         <li>列表项2</li>
         <li>列表项3</li>
      </ul>
当我们需要定义列表序号的类型的时候可以以下做法,如<ul style="list-style-type:disc">。ul中只能嵌套li,li相当于一个容器,可以容纳所有的元素。

ol:有序列表标签,列表有顺序之分,按照如1,2,3这个顺序来。语法为:

 <ol>
<li>列表项1<技术分享图片>
<li>列表项2<技术分享图片>
<li>列表项3<技术分享图片>
</ol>
当我们需要定义列表序号的类型的时候可以以下做法,如:<ol type="A">,在ol开始标签里面加上序号类型 

dl:自定义列表标签,常用语对名词或术语的解释和描述,列表前没有任何符合,语法格式为:

<dl>

    <dt>北京</dt>

   <dd>海淀</dd>

 </dl>

table:表格标签,在html网页中,想要创建表格,必须使用表格相关的标签。语法基本格式如下:

      <table> 如果需要给表格定义边框,在括号里面输入边框相应的值
               <tr>
                    <td>单元格内的文字</td>
      </table>
      其中table代表表格,tr代表表格里的行里面只能嵌套,td代表表格行里的单元格,像一个容器里面可以容纳所有元素。

表格的属性:border(边框值,默认0)、cellpadding(单元格内容与单元格边框之间的边距)、cellspacing(单元格与单元格边框之间的空白边距)、width、height。日常开发过程中border、cellpadding、cellspacing基本设置为0.

表格标题:caption,定义表格的标题。caption必须写在table标签之后,每个表格只能定义一个标题,通常居中在表格上面。

合并单元格:跨行合并rowspan,跨列合并colspan,将多个单元合并的时候,会有多余的单元格溢出,这个时候就必须把溢出的单元格删除。例如把3个td合并,就多出了2个td,需要删除。公式:删除的个数=合并的个数-1.

 th:表头标签,一般位于表格的第一行或者第一列,文本默认加粗居中,设置表头就是用<th></th>代替相应单元格<td></td>。

 input:是输入空间,为单标签,语法:<input type="text/password/radio技术分享图片eckbox技术分享图片tton/submit/reset/image/file" name=""或者value=""/> 

<input />.他有很多属性,type属性为最基础的属性。除了type属性还有其他很多属性,具体如下:

     type属性:text(单行输入文本框)、password(密码输入框)、radio(单选按钮,radio里的值如果都是一组的,那么我们需要给这一组命名相同的name,这样点击单选框的时候就是多选一)、CheckBox(复选框按钮)、button(普通按钮)、submit(提交按钮)、reset(重置按钮)、image(图像形式的提交按钮)、file(文件域,比如上传附件)。

    name属性:由用户自定义,给某一个控件定义名字。

    value属性:用户自定义,定义input控件中要默认显示的文本值。

    size属性:正整数,定义input控件在页面中的显示宽度。

 label:为input的元素定义标签。作用:用于绑定一个表单元素,但点击label标签的时候,被绑定的表单元素就会获得焦点。绑定方法,如下:

           for属性规定label与哪个表单元素绑定

            <label for="用户名">用户名</label>(这里的文本“用户名”就是被label绑定了)

            <input type="text" name="user" id="用户名" value="">  这里的id的值一定是label绑定的表单元素的名字。

     用户名:___________,正常情况下,点击用户名后面的文本框才会获取输入焦点,现在文本框前面的用户名被绑定了,所以点击用户三个字,后面的文本框也会获取输入焦点

 textarea:控件,文本域,text只能输入一行,textare是可以输入多行内容。基本语法格式,如下:

 <textare cols=“输入的列数” rows=“输入的行数”>

文本内容……

</textare>

select:是表单里下拉菜单的基本控件,语法格式为:

<select>

<option>北京</option>

<option selected="selected">天津</option>

……

</select>

 <select></select>里面至少包含一对<option></option>,在option中定义selected的时候,当前的选项为默认选中。

form:表单域,用于被定义的表单域,创建一个表单。以实现用户的信息和收集,form中的所有内容都会被提交。基本语法格式为:

<form action="url地址" method="提交方式" name=“表单名”>

各种表单控件

</ form>

常用的属性:action(表单收集到信息后,信息需要提交到服务器处理,用于指定接收处理表单的数据服务器url)。method(用于设置表单数据提交的方式,get或post)。name(用于定义表单的名字,区分一个页面中有多个表单的情况)

 

-------------------只为兴趣,初步接触前端,了解了点html的知识,并记录。

html基础

标签:衣服   分区   外部   容器   跳转   窗口   通过   合并单元格   字符   

原文地址:https://www.cnblogs.com/chengfangyuan/p/9040085.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!