day2html相关内容

最新推荐文章于 2024-05-19 11:27:40 发布

Tiny_G

最新推荐文章于 2024-05-19 11:27:40 发布

阅读量101

点赞数

分类专栏： Web前端基础文章标签： html css web

本文链接：https://blog.csdn.net/qq_45801179/article/details/109644294

版权

Web前端基础专栏收录该内容

12 篇文章 1 订阅

订阅专栏

0.作业

熟悉HTML文件结构，并练习基本标签使用。

//搜索引优化关键字 <title>

 <!DOCTYPE HTML>
 <html>
     <head>
         <meta charset="UTF-8"/>
         <meta name="keyword" content="...."/>
         <meta name="description" content="...">//搜索引优化关键字
         <link rel="shortcut icon" href="路径名+文件名 " type="image/x-icon">
         <title><title>
         <link rel="stylesheet" href="外部样式文件" />
         <style rel="text/css">
             <!---->
             <!--样式设置-->
         <style/>
     </head>
     <body>
             <!--网页主题-->
     </body>
     <script language="javascript" type="text/javascript">
             <!--脚本代码-->
     </script>
 <html/>

熟悉W3C规范，熟悉语义化标签，整理每个标签对应的语义环境。

W3C有结构（html），表现(css)和行为(逻辑实现javascript)三部分组成`
W3C语言规范：
1）定义语言编码：
         <meta charset="UTF-8"/>
2）javascript定义：
<scriptlanguage="javascripttype="text/javascript">
             <!--脚本代码-->
</script>
3)CSS定义：
<style rel="text/css">
             <!---->
             <!--样式设置-->
<style/>

4）注释内容中不要出现“-”
<!--注释--内容--> X
5）所有标签和名字都用小写
6）所有属性值必须用双引号引起来
7）在输出<,>,&用实体转义字符实现
<p>&gt;&lt,&amp</p>
8)给属性赋初值，不要空，如果不赋值，默认属性值为本身
9）所有的标签或元素都必须有相应的结束标记，即必须要闭合
<p><p/>
<hr/>
10)所有标签必须合理嵌套，不能交叉
11）图片要添加的有意义的alt属性
12）在form表单中要lable，增加用户体验效果

练习并测试HTML标签嵌套规则。
用HTML语言实现如图1-6所示的静态页面。

（1）为该页面标题设置值，并且为标题添加icon图标。

（2）实现下图内容。

（3）给标题内容以及图片添加链接。

1.标签属性

1.标签是有标签名，标签属性和文本内容组成

2.标签属性分通用属性，自有属性和自定义属性

通用属性：id，class，style,title:鼠标移到该标签，提示文本

自定义属性：通常用来传值或用于图片的懒加载

格式：data-*

2.table表格

格式:

table>tr*3>td{内容$}*3
<table border="1px" width="" cellspacing="两个表格换个之间的距离" cellpaddig="单元格文本与边框的距离" align="对齐方式left（默认值）center、right">
    <tr>
    	<th>表头：起说明作用，自动居中，自动加粗</th>
    	<td></td>
    </tr>
</table>

跨行跨列表格：

rowspan:跨行

Emet语法：table[border=1width=500align=center]>tr*3>td{内容区$}*3
<table>
    <tr>
        <td rowspan="2" align="centervalign="middle">内容</td><!--align水平对其，valign垂直对其=top/middle/bottom-->
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

colspan:跨列

<table>
    <tr>
        <td rowspan="2" align="centervalign="middle">内容</td><!--align水平对其，valign垂直对其=top/middle/bottom-->
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td colspan="3"></td>
    </tr>
</table>

3.完整表格组成

caption（标题）,thead(表头)，tbody(表体)和tfoot(表尾)四部分组成

Emet:<!--table[border=1 align=center cellspacing=0]>（caption{学生信息等级表}）+(thead>tr>th*3>)+(tbody>tr*3>tr{内容$}*3)+（tfoot>tr>td[colspan=4]）-->

4.表单元素

1.form是最核心标签之一，是用来实现前后端交互的一个重要标签。

2.常用属性：

name:表单名称

action：表单数据提交的地方（通常是一个文件名后缀.jsp/.php/.aspx/.py，或网址）。如果是#，表示提交到当前文件

method:前端提交数据到后端的方法，，主要有：get和post，默认get.

<form name="su" action="https:www.baidu.com" method="get">
    <input type="text" placehouder="请输入账户名">
    <input type="submit">
</form>

get：在提交的时候会暴露，post不会

3.表单元素分为：

1）input类：主要用来输入，选择或发出指令

a.文本框

type:text/password/radio/checkbox/file/image/submit/reset

text:单行文本框 type="text"可以不写，默认text
属性：placeholder(提示)/name(命名)/minlength和maxlengthO（最少和最多输入个数）/disabled(失效)/readonly(只读)/value(默认值)、pattern(正则匹配)
<form>
    <input type="text" name="test" placeholder="请输入一个数字" value="100" disabled="disabled">
    <!--disabled可以为空，属性值可以不写，可以只为disabled-->
</form>

b.密码框 :password 属性与text一样

c.单选钮：radio，通常两项以上。常用属性：name(必须有)/value/check（默认选中）/disabled(失效)/readonly(只读)

<input type="radio" name="sex" checked="checked"/>男
<input type="radio" name="sex"/>女
<input type="radio" name="sex"/>1
<input type="radio" name="sex"/>2
<input type="radio" name="sex" checked/>3

d.复选框：checkbox,用法跟radio一样,常用属性：name(必须有)/value/check（默认选中）/disabled(失效)/readonly(只读)

<input type="checkbox" name="hobby">听歌
<input type="checkbox" name="hobby" checked>码代码
<input type="checkbox" name="hobby" checked>其他

f.file:文件上传按钮

<input type="file">

g.button:普通按钮：通常用它去调用脚本代码,value（按钮值）/disabled(失效)

<input type="button" value="登陆" disabled>

h.image:图片按钮，用法与button一样，有一个特殊属性src(用来加载提示图片，用它替换了value)

<input type="image" src="image/1.jpg" title="刷新">

i.submit:提交按钮，将表单数据提交到后台

j.reset:重置按钮，将表单所有组件的输入内容还原到初始状态

<input type="submit"  value="提交">
<input type="reset"  value="重置">

注意：submit和image都有提交数据的功能

2）textarea类：

文本域或多行文本框，主要用来输入大批量的数据

常用属性：name/id/cols/rows/placeholder/minlength/required(必须输入)/value（获取文本内容)

<form>
<textarea ></textarea>
</form>

3）select类：

下拉列表框，默认单项选择，用option呈现每个选项

multiple属性：表示可以多选，这时的下拉列表框变成列表框

size:最多显示的行数

<form>
<label for="sex">性别：</label>//for用来关联，内容和关联组件的Id相同
    <select id="sex">
        <option value="male">男</option>
          <option value="male">男</option>
    </select>
    <br/>
    <label for="course">性别：</label>//for用来关联，内容和关联组件的Id相同
    <select id="course">
        <option value="语文">语文</option>
        <option value="数学">数学</option>
        <option value="英语">英语</option>
    </select>
</form>

4）button类：

普通按钮，具有自动提交功能，可以单独使用，不写在元素中；如果写在form中有自动提交功能

<body>
    <button> 确认</button>//这里的button主要用来调用js代码
    <form action="test.aspx">
        <input type="text" name="info">
        <button> 提交</button>//这里的button功能与input中的submit按钮功能一样
    </form>
</body>

表单的通用属性：name/value/readonly/disabled

5.iframe:框架集

将多个网页文件组合成一个文件

常用属性：

name:框架名

src:引入外部html文件

scrolling:滚动条（yes/no/auto）

width:宽度(%/px)

height:高度(%/px)

frameborder:是否有框架边框（1/0）

marginheiht:框架离顶部和底部的距离(%/px)

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

<body>
<iframe src="" srcolling="no" width="100%" frameborder="0">
    
</iframe>    
</body>

Tiny_G

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day2html相关内容

0.作业熟悉HTML文件结构，并练习基本标签使用。 //搜索引优化关键字 <title> <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"/> <meta name="keyw
复制链接

扫一扫