教育网站建设的策划书,公司做网站的好处,alexa怎么查询网站排名,简单的网站有哪些个人主页#xff1a;终端
HTML标签 目录
2.1标题标签
2.2段落标签
2.3换行标签
2.4列表标签
2.5超链接标签
2.6图片标签
2.7表格标签 2.8-2.9表单标签表单项
2.10布局相关标签 2.11特殊字符 2.1标题标签 标题标签 代码 h1鸣/h1 h2潮终端
HTML标签 目录
2.1标题标签
2.2段落标签
2.3换行标签
2.4列表标签
2.5超链接标签
2.6图片标签
2.7表格标签 2.8-2.9表单标签表单项
2.10布局相关标签 2.11特殊字符 2.1标题标签 标题标签 代码 h1鸣/h1 h2潮/h2h3启/h3h4动/h4h5/h5h6/h6
2.2段落标签 段落标签 段落 p 代码
pThis is mingchao /p
pYes/p
2.3换行标签 换行标签 换行1.hr 分隔符 2.br 换行代码
br
hr
2.4列表标签 有序列表 列表标签ol
列表项标签li
代码
olli数据类型/lili变量/lili流程控制/lili函数/lili面向对象/li/ol 有序列表 列表标签ul
列表项标签li
代码 ulliJAVAolli数据类型/lili变量/lili流程控制/lili函数/lili面向对象/li/ol/liliC/liliC/lilipython/liligo/li/ul
2.5超链接标签 超链接标签 href 用于定义要跳转的目标资源的地址1.完整的url while03-CSDN博客 2.相对路径 以当前资源的所在路径为出发点去找目标资源 3.绝对路径 无论当前资源在哪里使用以固定的位置作为出发点去找目标资源以/开头
target 用于定义目标资源的打开方式
1. _self 在当前窗口打开目标资源2. _blank 开启新窗口打开目标资源
代码
body!--超链接标签a href 用于定义要跳转的目标资源的地址1 完整的url https://blog.csdn.net/twlinl0613?spm1010.2135.3001.53432 相对路径 以当前资源的所在路径为出发点去找目标资源3 绝对路径 无论当前资源在哪里使用以固定的位置作为出发点去找目标资源以/开头target 用于定义目标资源的打开方式_self 在当前窗口打开目标资源_blank 开启新窗口打开目标资源--!--完整的url--a hrefhttps://blog.csdn.net/twlinl0613?spm1010.2135.3001.5343 target_blankwhile03的博客/a!--相对路径写法--a href02标题段落换行.htmltarget_blank02标签/aa hrefa/test.htmltarget_blanktest/a!--绝对路径写法--a href/demo1-html/a/test.htmltarget_blanktest/a
/body
2.6图片标签 图片标签:img(重点)图片标签用于在页面上引入图片 效果 图1 代码
body!--imgsrc 定义图片的路径1.url2.相对路径3.绝对路径title 定义鼠标悬停时提示的文字alt 定义图片加载失败时提示文字--img srcimg/鸣潮.jpgwidth300px title鸣潮 alt加载失败
/body
2.7表格标签 常规表格 table标签 代表表格
thead标签 代表表头 可以省略不写
tbody标签 代表表体 可以省略不写
tfoot标签 代表表尾 可以省略不写
tr标签 代表一行
td标签 代表行内的一格
th标签 自带加粗和居中效果的td
效果 图2 代码
body!--table 整张表格thead 表头tbody 表体tfoot 表尾tr 表格中的一行 td 行中的一个单元格th 自带加粗居中效果的tdstyletext-align:center; 文字居中rowspan 表格向下colspan 表格向右--h3 style text-align: center;员工技能竞赛评分/h3table border 1px stylemargin: 0px auto; width: 500px;theadtrth排名/thth姓名/thth分数/thth备注/th/tr/theadtbodytrtd1/tdtd小王/tdtd90/tdtd rowspan6前三名升职加薪/td/trtrtd2/tdtd老刘/tdtd90/td/trtrtd3/tdtd小崔/tdtd90/td/trtrtd总人数/tdtd colspan22000/td/trtrtd平均分/tdtd colspan290/td/trtrtd及格率/tdtd colspan280%/td/tr/tbodytfoot/tfoot/table
/body 2.8-2.9表单标签表单项 表单标签可以实现让用户在界面上输入各种信息并提交的一种标签是向服务端发送数据主要的方式之一 from标签表单标签其内部用于定义可以让用户输入信息的表单项标签 1.actionfrom标签的属性之一用于定义信息提交的服务器地址 2.method from标签的属性之一用于定义信息的提交方式
get
1.参数会以键值对形式放在url后提交
2. 数据直接暴露在地址栏上相对不安全 3.地址栏长度有限制所以提交的数据量不大 4.地址栏上只能是字符不能提交文件 5.相比post效率高一些
post 1.参数默认不放到url后 2.数据不会直接暴露在地址栏上相对安全 3.数据是单独打包请求体发送提交的数据量比较大 4.请求体中可以是字符也可以是字节数据可以提交文件 5.相比于get效率略低一些 input标签 主要的表单项标签可以用于定义表单项 表单项标签一定要定义name属性该属性用于明确提交时的参数名 表单项还需要定义value属性该属性用于明确提交实参 name : input标签的属性之一用于定义提交的参数名。type : input标签的属性之一用于定义表单项的类型。 1. text 单行普通文本框 2.password 密码框 3.submit 提交按钮 4.reset 重置按钮 5.radio 单选框 多个单选框使用相同的name属性值则就会有互斥效果 6.checkbox 多选框 7. hidden 隐藏域 不显示在页面上提交时会携带 8.file 文件上传框 textarea 多行文本框文本域select 下拉框
效果 图3 代码
body!--formaction 定义数据的提交地址1.url2.相对路径3.绝对路径method 定义数据的提交方式GET1.参数会以键值对形式放在url后提交2. 数据直接暴露在地址栏上相对不安全3.地址栏长度有限制所以提交的数据量不大4.地址栏上只能是字符不能提交文件5.相比post效率高一些POST1.参数默认不放到url后2.数据不会直接暴露在地址栏上相对安全3.数据是单独打包勇敢请求体发送提交的数据量比较大4.请求体中可以是字符也可以是字节数据可以提交文件5.相比于get效率略低一些表单项标签表单项标签一定要定义name属性该属性用于明确提交时的参数名 表单项还需要定义value属性该属性用于明确提交实参inputtype 输入信息的表单项类型text 单行普通文本框password 密码框submit 提交按钮reset 重置按钮 radio 单选框 多个单选框使用相同的name属性值则就会有互斥效果 checkbox 多选框 多个选项选多个hidden 隐藏域 不显示在页面上提交时会携带file 文件上传框textarea 多行文本框(文本域)select 下拉框option -- form action08welcome.html methodget!--添加表单标签 用户输入信息的标签--!--希望用提交一些特定的信息但是考虑安全问题或者是用户操作问题不希望该数据发生改变readonly 只读disabled 不可用不提交时 不携带-- input typehiddennameidvalue1input typetextnameidvalue456 readonly brinput typehiddennameidvalue789 disabledbr用户名:input typetext nameusername/br密码: input typepassword nameusePas/br性别input typeradionamegrander value1 checked男input typeradionamegrander value0女爱好input typecheckbox namehobby value1乒乓球input typecheckbox namehobby value2足球input typecheckbox namehobby value3羽毛球input typecheckbox namehooby value4 篮球br个人简介textarea name in stylewidth:300px; height:100px我来自于/textarea br籍贯select namep option value1京/optionoption value2浙/optionoption value3冀/optionoption value0 selected--请选择--/option/selectbr选择头像input typefilebrinput typesubmit value登陆/input typereset value清空/br/form
/body
2.10布局相关标签 div标签 俗称块主要于划分页面结构做页面布局 span标签 俗称层主要用于划分元素范围配合CSS做页面元素样式的修饰 代码
body stylebackground-color: cadetblue;!--css 设置样式通过元素的style属性进行设置style样式名样式值;样式名样式值;........块元素自己独占一行的元素 块元素的CSS样式的宽 高等等往往是生效div行内元素不会自己独占一行的元素 行内的CSS样式的宽 高等等往往是不生效span--div styleborder:1px solid blue; width: 400px;height: 300px;margin:10px auto; background-color: cadetblue; 123 /divbrdiv styleborder:1px solid blue; width: 400px;height: 300px;margin:10px auto;background-color: beige; 依靠加纳乔、梅努的进球曼联在战胜曼城之后赢得足总杯冠军这是他们自span stylefont-size: 20px;color:blue;font-weight:bold;2015-16赛季/span以来首次赢得足总杯。 /divbrspan styleborder: 1px solid brown; width: 500px; height: 300px;555/span /divbrdiv styleborder:1px solid blue; width: 400px;height: 300px;margin:10px auto ; background-color: bisque; 依靠加纳乔、梅努的进球曼联在战胜曼城之后赢得足总杯冠军这是他们自span stylefont-size: 20px;color: aquamarine;font-weight:bold;2015-16赛季/span以来首次赢得足总杯。 /divbrspan styleborder: 1px solid brown; width: 500px; height: 300px;555/span
/body
效果 图4 2.11特殊字符 对于有特殊含义的字符需要通过转移字符来表示 参考w3school
HTML中有用的字符实体
注释实体名称对大小写敏感 图5 代码
body!--有特殊含义的符号叫做字符实体对于html代码来说某些符号是有特殊含义的如果想显示这些特殊符号需要进行转移--lt;h1gt;一级标题lt;/h1gt;amp;
/body
效果 好啦前几天学校运动会拖欠了的稿子今天补发了继续坚持写稿然后写完稿肝数据坞啦
