首页 前端知识 Web前端新手入门系列:1、HTML

Web前端新手入门系列:1、HTML

2024-06-18 00:06:40 前端知识 前端哥 890 447 我要收藏

1、HTML概述

1.1 HTML的基本结构

<!DOCTYPE html><!--!表示申明的意思,这一行表明下面文档标签以html5规范去解析-->
<html>
    <!--1.头部,主要用来完成一个网页的相关设置的.-->
	<head>
        <meta charset="utf-8"><!--支持汉字编码--><!--meta:元,完成对应设置-->
        <meta name="keywords" content=""><!--设置一个网站的搜索关键字-->
        <meta name="description" content=""> <!--网站的描述内容,都写在content里-->
        <title>我的第一个网页</title><!--标题-->
        <link rel ="shortcut icon" href="favicon.ico",type="image/x-icon"><!--设置网站小图标-->
        <!--href为图标地址,type为类型png,则把x-icon改为png-->
        <style>
            //书写样式的地方
        </style>
        <link rel="stylesheet" href = "style.css"><!--用来引入外部样式文件-->
    </head>
    <!--2.主体部分-->
    <body>
    	<p>这是一个段落</p>
    </body>
    <script>
    	<!--放脚本语言,可以放在body里面--> 
    </script>
</html>

1.2 HTML的基本标签

<!--!+tab或html:5+tab会自动生成文档结构-->

<html lang="en">
<head>
    <meta charset="utf-8" >
    <title></title>
</head>
<body>
	<!--1.div:用来布局的,没有具体含义,层-->
    <div>
       Alpha
        <div>Beta</div>
    </div>
    <!--2.hx:标题,从1级到6级,1级最大,会自动加粗,有默认字号-->
    <h1>中国</h1>
    <h2>上海</h2>
    <h6>杨浦</h6>
    <!--3.p:表示段落。相当于一个回车。-->
   <p>古德里安:我是闪电战创始人,28天灭亡波兰。</p>
	<p>曼施坦因:我在哈尔科夫10万残兵击败了苏军50万精锐。</p>
	<p>朱可夫:我以列宁格勒一座城市坚守900天,最后反攻取得全面胜利。</p>
	<p>麦克阿瑟:我是西点军校第一名。</p>
   	<!--4.br,换行,p标签一般表示一段连续的文字,p内的换行通过br实现,并不成对出现-->
    <p>你觉得<br />你能<br />杀!死!我?! </p>
    <!--5.hr:生成一条水平线,主要起装饰作用。单标签,最好闭合(加上/)-->
    <hr/> <hr width="80%" align="center" color ="red" height="2px"/><!--默认为100%,黑色,1px-->
    <!--6.a:实现超文本链接-->
    <a href="http://baidu.com" title="百度" target="_blank">百度</a>
    	<!--href是跳转地址,title是鼠标放上去的提示,target有4个参数:
			1、_blank 打开一个新页面
			2、_self 把当前页面变为跳转结果
			3、_parent 使得文档载入父窗口或者包含来超链接引用的框架的框架集
			4、_top	使得文档载入包含这个超链接的窗口,将会清楚所有被包含的框架并将文档载入整个浏览器窗口
		-->
    <!--7.img:用来加载图片、图像。src:图片图像路径,alt:加载失败时显示的内容,title:鼠标移上去的提示文字-->
   	<!--<img src="" alt="" title=""/>-->
    <!--8.span:与div一样,用于布局,不过div会单独占一行,span不会,用于行内布局-->
    <div>div1</div>
    <div>div2</div>
    <span>span1</span>
    <span>span2</span><!--不会换行,中间空一格-->
    <!--9.ul/ol:前者是无序列表,后者是有序列表,列表内容都使用li标签,ul前面是黑点,ol有序号-->
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>
    <!--注释快捷键为:Ctrl+Shift+/ -->
</body>
</html>

1.3标签

1.3.1 标签属性

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <!--标签属性:
		1、通常由属性名=属性值组成
		2、起附加信息的作用
		3、不是所有标签都有属性,比如br标签
	-->
    <p title="段落" class="content" id="content">这是一个测试段落</p>
</body>
</html>

1.3.2 文本格式化标签

<!DOCTYPE html>

<html lang="en"
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
 	<!--文本格式化标签:通过标签来美化文本外观-->
    <!--1.b和strong:加粗作用,且都是行级标签(不换行)但strong还有强调作用。强调主要用于SEO,便于提取关键字-->
    <b>加粗</b>
    <strong>加粗且强调</strong>
   	<!--2.i和em:使文字倾斜,em具有强调作用,行级标签,如果只是简单的倾斜效果,用i就可以,比如添加图标-->
    <i>倾斜</i>
    <em>倾斜且强调</em>
    <!--3.pre:预格式化文本,保留换行和空格及宽度,字号是小一号,块级标签,独占一行,且识别宽高=-->
    <pre>预格式化文本,保留
    	换行   和    空格</pre>
    <!--4.small和big:缩小或放大一号,行级标签-->
    <!--浏览器支持的最小字号为12px,再小需要做处理-->
    <small>小一号</small>
    <big>大一号</big>  <!--被淘汰了,但还是能用,尽量别用。使用CSS来规定文本大小-->
    <!--5.sub和sup:设置文本为下标和上标-->
    <p>X1+X2=Y</p>
    <p>下标:X<sub>1</sub>+X<sub>2</sub>=Y</p>
    <p>上标:X<sup>2</sup>+Y<sup>2</sup>=Z<sup>2</sup></p>
</body>
</html>

1.3.3 单双标签

单标签:由一个标记组成,一定要闭合。例如

换行符:<br/>
水平线:<hr/>
图片标签<img/>
文本标签<input/>
link标签<link/>
元信息标签<meta/>

双标签:由“开始标签”和“结束标签”两部分构成,必须成对使用。

<html><head><title><body><table><span><div><p><h1>

1.3.4 实体转义

以&开头,;结束

符号转义符号
小于号& lt;
大于号& gt;
& amp;
空格& nbsp;
版权& copy;
乘号& times;
除号& divide;

1.4 HTML块级元素和行内元素

1.4.1 块级元素

​ 块级元素会独占一行,其宽度自动填满其父元素宽度,一般情况下,块级元素可以设置width,height属性,一般用来搭建网站架构、布局、承载内容…如果没有设置宽度,则默认铺满整行,其内可以包含块级和行级元素。相当于执行display:block操作

<address><dir><div><dl><dt><dd><fieldset><form><h1><hr><menu><noframes><ol>

1.4.2 行内元素

​ 行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排列不下才会换行,其宽度随元素的内容而变化,行元素设置widthheight无效。一般用在网站内容之中的某些细节或部位,用以“强调、区分样式、上标、下标、锚点"等等。宽度和高度是不可控的,其内只有行级元素。相当于执行display:inline操作

<a><b><bdo><small><br><cite><em><font><img><input><label><sub>

1.4.3 相互转换

<!--1.块级标签转换为行级标签:-->
<!--inline转换为行级标签,宽高标签失效-->
<p style ="width:300px; height:50px; background:gray; display:inline">TEST</p>
<!--2.行级标签转换为块级标签-->
<span style ="width:300px; height:50px; background:blue; display:block">TEST</span>

1.5W3C规范

1.5.1 W3C

​ 万维网联盟(World Wide Web):一个国际性的中立组织,专门负责统一web相关的各项标准。

​ W3C标准由结构、表现和行为三部分组成

1.5.2 标签嵌套规则

1.块级元素可以包含内联元素(行内元素)或某些块级元素,但内联元素不能包含块元素,它只能包含其他内联元素
<div><h1></h1><p></p></div> 正确
<a href="#"><span></span></a> 正确
<span><div></div></span> 错误
2.块级元素不能放在<p>里面
<p><ol><li></li></ol></p>  错误
<p><div></div></p>  错误
3.几个特殊的块级元素只能包含行内元素,不能再包含块级元素:
<h1><h2><h3><h4><h5><h6><p><dt>
4.块级元素与块级元素并列,行级元素与行级元素并列
<div><h2><p></p></h2></div>  正确
<div><a href="#"></a><span></span></div> 正确
<div><h2></h2><span></span></div>  错误

1.5.3 HTML语义化标签

1、语义化,即明白每个标签的用途,再什么情况使用这个标签才合理

例如:网页上的文章标题可以用h1h6,各个栏目的名称也可以使用h1h6,文章中内容的段乱就得放在 段落标签p 中,再文章中由想强调的文本,就可以使用em标签表示强调等。

2、好处:更容易被搜索引擎收录,更容易让阅读器读出网页内容,能更好的体现页面的主题,兼容性更好

3、HTML语义化标签

1)< a>标签:实现超链接

**强调:**title属性的作用,鼠标滑过链接文字时会显示这个属性的文本内容。很有用

2< p>标签:文章段落放到

标签中

3)< hx>标签:文章标题,栏目标题用表示

4)< strong> 和< em>标签:特别强调某几个文字

5)< q>标签:短文本引用。注意引用的文本不用加双引号,浏览器会对q标签自动添加双引号

6)< address>标签:为网页加入地址信息

7)< ul>和< ol>标签:无序列表和有序列表

8)< caption>标签:为表格添加标题和摘要,摘要的内容不会在浏览器中显示出来,作用时增加表格的可读性,使搜索引擎更好的读懂表格内容,还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。

1.6 企业规范

1、项目中文字或目录名中不能出现汉字和空格之类的其它符号,文件和目录名一般以字母或下划线开头_

页面命名规范
首页index.html
公司介绍about.html
新闻列表news.html
新闻详情页news_details.html
产品列表product.html
产品详情页pre_details.html
联系我们contact.html

2、HTML标签属性

2.1 HTML标签属性

标签由标签名、标签属性和文本内容组成 (单标签没有文本内容)

标签属性是对标签的一种描述方式:

2.1.1 通用属性:所有标签都有的属性

  • id:用来给标签起一个唯一的名称
  • class:用来给标签取一个类名,可以用来操作一批标签
  • style:用来设置该标签的行内样式。
  • title:当鼠标移到该标签上,所显示的提示内容
<html lang="en"
<head>
    <meta charset="utf-8" />
    <title>标签通用属性</title>
</head>
<body>
    <!--id:给标签取一个标识名-->
    <p id="p1">段落</p>
    <p id="p2">段落</p>
    <!--class:给一组标签取一个类名-->
    <div class="test">div</div>
    <p class="test">p</p>
    <!--style:用来设置当前标签的样式,也叫行内样式-->
    <p style="color:red;width:200px;border:1px solid #00f;">这是一次测试</p>//蓝色边框,红色文字
    <!--title:给当前标签一个提示文本-->
    <p title="111414">title标签属性测试</p>
</body>
</html>

2.1.2 自定义标签属性:通常用来传值或用于图片懒加载等封面

​ 格式:data-*

<img data-src="path" alt="fault"  /> <!--图片懒加载,到可视区域时,才把src取出来-->
<p data-id="goodsid">...</p>

3、自有属性

2.2 table表格

table主要用于呈现格式化数据。表格是由行和列组成。

2.2.1 表格属性:

  • border:设置表格边框,值为边框宽度,默认单位时像素
  • width:设置表格宽度,默认单位是像素
  • align:设置表格对齐(left(默认)/center/right)
  • cellpadding:设置单元格间距,单元格文本与
  • cellspacing:设置像素间隙,单元格边框间距
<table border="1" width="400" cellspaceing="0" cellpadding="10" align="center">
    <tr>//行
    	<th>学号</th>//表头,自动加粗居中
        <th>姓名</th>
        <th>住址</th>
    </tr>
    <tr>
    	<td>007</td>//列
        <td>零零漆</td>
        <td>北京</td>
    </tr>
    <tr>
    	<td>214</td>//列
        <td>两仪式</td>
        <td>日本</td>
    </tr>
</table>

2.2.2 跨行跨列属性

跨行rowspan属性,合并行:

<tabel border="1" width=500 align=center>
	<tr>
    	<td rowspan="2" align="center" valign="middle"></td><!--valign:top,middle默认,bottome=-->
        <td></td>
        <td rowspan="3"></td>
    </tr>
	<tr>
    	<!--<td></td> 被第一行第一个合并了-->
        <td></td>
        <!--<td></td>  被第一行第三个合并了-->
    </tr>
	<tr align="center"><!--整行居中,合并后会失效-->
    	<td></td>
        <td></td>
        <!--<td></td>  被第一行第三个合并了-->
    </tr>
</tabel>

跨列colspan属性,合并列:

<tabel border="1" width=500 align=center>
	<tr>
    	<td></td>
        <td colspan="2" align ="center"></td>
        <!--<td ></td> 被(1,2)合并-->
    </tr>
	<tr>
    	<td></td>
        <td></td>
        <td></td>
    </tr>
	<tr>
    	<td colspan="3" align="right"></td>
        <!--<td></td> 被(3,1)合并-->
       <!--<td></td> 被(3,1)合并-->
    </tr>
</tabel>

2.2.3 完整表格属性

​ 一个完整table表格一般包含**< caption>< thread>< tbody>< tfoot>**元素结合,用来规定表格的各个部分(标题、表头、主体、页脚)。

  • < thead>标签用于组合HTML表格的表头内容
  • < tbody>标签用于组合HTML表格的主体内容
  • < tfoot>标签用于组合HTML表格的页脚内容
<table border="1" width="600" align = "center">
    <caption>学生信息表</caption>
    <thead>
        <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>家庭住址</th>
        <th>备注</th>
        </tr>
    </thead>
    <tbody>
         <tr>
         <!--按住Ctrl,鼠标点击后,松开Ctrl可进行连写-->
        <td align="center">001</td>
        <td>Tom</td>
        <td>格林伍德</td>
        <td>普通留学生</td>
        </tr>
         <tr>
        <td align="center">002</td>
        <td>Nigger*</td>
        <td>刚果</td>
        <td>非洲留学生</td>
        </tr>
         <tr>
        <td align="center">002</td>
        <td>李华*</td>
        <td>北京</td>
        <td>正黄旗</td>
        </tr>
    </tbody>
    <tfoot>
    <tr>
    	<td colspan="4" >附注:*为优秀学生</td>    
    </tr>
    </tfoot>
</table>

2.3 form表单:核心标签

form是用来实现前后端交互的一个重要标签。

2.3.1 表单属性

常用属性:

  • name:表单名称
  • action:表单数据提交的地方(通常是一个文件名(.jsp/.php.asp/.aspx/.py/)或网址),如果是#表示提交到当前文件
  • method:前端提交数据到后端的方法,主要有:get和post,默认的是get,ger会将输入信息暴露在地址栏,post则不会
<form name="stuInfo" action="#" metond="get">
    <input type="submit">
</form>

2.3.2 表单元素

表单元素的有:

1)< input>:输入类,根据不同的type属性,可以变化为多种状态输入方式。

<!--1.文本框-->
<input type="text"/>:定义供文本输入的单行输入字段,默认值
	属性:placeholder(提示)/name(命名)/minlength和maxlength(最少/多输入的字符个数)/disabled(失效)/readonly(只读)/value(初始值)/pattern(正则匹配)
<!--2.密码框-->
<input type="password"/>:定义密码字段,属性与text一样,效果是输入以星号显示
<!--3.单选钮-->
定义单选按钮,通常两项以上,属性:name(必须有)/value/checked(选中)/disabled(失效)/readonly
<input type="radio" name="sex" checked/><!--默认选中男-->
<input type="radio" name="sex"/><!--同一name下的radio会排斥,所以必须有name才能正常起作用-->、、
<!--4.复选框/检查框--> 选择0项、1项或多项
<input type="checkbox" name = hobby/>打搅
<input type="checkbox" name = hobby/>睡觉
<input type="checkbox" name = hobby/>其他
<!--5.文件上传按钮-->
<input type="file"/>
<!--6.普通按钮--> 通常用它取调用脚本代码
<input type ="button" value="登录" disabled /> 定义普通按钮
常用属性:value(按钮的标题)/disabled(失效)
<!--7.图片按钮-->
	用法与button一样,特殊属性:src(用来加载提示图片,用来替换了value)
<input type="image" src=“” title="刷新"/>
	有提交功能,与sumbit功能一样
<!--8.提交按钮-->
<input type = "submit" value="" disabled/>:定义提交表单数据至表单处理程序的按钮
<!--9.重置按钮-->
<input type="reset" value="" disabled/>将表单所有组件输入的内容全部清空,还原为初始状态

2)< textarea>

​ 文本域(也可以叫多行文本框),用于输入大批量的内容

​ 常用属性:name/id/cols/rows/placeholder/minlength/maxlength/required(必须输入)/value

<textarea name="" id="" cols="30" rows="10" placeholder></textarea>

3)< select>

​ 下拉列表框,默认用于单项选择,用option呈现每一个选项

<form action="">
    <label for="course">选课:</label>
    <select id="course" multiple size=""><!--multiple控制多选,size控制列表的大小-->
        <option value="语文">语文</option>
        <option value="数学">数学</option>
        <option value="计算机">计算机</option>
        <option value="其他">其他</option>
    </select>
</form>

4)< button>

​ 普通按钮,具体提交功能,可以单独使用,不写在form元素中;如果写在form中,就有提交功能

<button id="btnOk">确认</button><!--主要用来调用js代码-->
<form action="test.aspx">
    <input type="text" name="info">
    <button>提交</button><!--这里的button的共嗯那个与input的submit按钮功能一样-->
</form>

2.4 iframe

框架集,是用来将多个网页文件组合成一个文件。

常用属性:

  • name:框架名

  • src:引入的外部html文件

  • scrolling:滚动条(yes/no/auto)

  • width:宽度(%/px)

  • height:高度(%/px)

  • frameborder:是否有边框

  • marginheight:框架离顶部和底端的距离(%/px)

  • marginwidth:框架离左右的距离(%/px)

    注意:在实际开发中,尽量减少使用iframe,因为它破坏了前进和破坏的功能,且不利于搜索。

    <!DOCTYPE html>
    
    <html lang="en"
    <head>
        <meta charset="utf-8" />
        <title>我的网站</title>
    </head>
    <body>
        <!--src内的html不需要从头开始写-->
        <!--banner-->
        <iframe src="iframe/banner.html" scrolling="no" width="100%" frameborder="0"></iframe>
        <!--导航-->
        <iframe src="iframe/banner.html" scrolling="no" width="30%" frameborder="0"></iframe>
        <!--核心内容区-->
        <iframe src="iframe/banner.html" name ="main" scrolling="no" width="70%" frameborder="0"></iframe>
        <hr wid/>
    </body>
    </html>
    

K.模板

<!DOCTYPE html>

<html lang="en"
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <hr wid/>
</body>
</html>
转载请注明出处或者链接地址:https://www.qianduange.cn//article/12524.html
标签
评论
发布的文章

jQuery基本使用

2024-06-24 02:06:16

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!